Custom postInvokes

Custom postInvokes

To create handlers for your own postInvoke types you can use customEpic mechanic.

Step one: create epics module with epic for processPostInvoke action

// src/epics/view.ts of your application (or other module with epics if you organize them differently) 
import {combineEpics} from 'redux-observable'
import {Observable} from 'rxjs/Observable'
import {coreActions, $do} from '@tesler-ui/core'
import {Epic} from '@tesler-ui/core/actions/actions'
import {OperationPostInvoke} from '@tesler-ui/core/interfaces/operation'

// Some new postInvoke with additional string array field
interface CustomPostInvoke extends OperationPostInvoke {
    type: 'customPostInvoke',
    customPayload: string[]
}

// Catch coreActions.processPostInvoke
const processPostInvoke: Epic = (action$, store) => action$.ofType(coreActions.processPostInvoke)
.mergeMap(action => {
    switch (action.payload.postInvoke.type) {
        // Catch specific type of your custom postInvoke
        case 'customPostInvoke': {
            // Cast postInvoke to have access to additional fields
            const postInvoke = action.payload.postInvoke as CustomPostInvoke
            // Here you can put your custom logic and call come other action
            console.info(`Handled by client application: ${postInvoke.customPayload}`)
            return Observable.of($do.logout(null))
        }
        default:
            return Observable.empty()
    }
})
// Export your postInvoke
export const viewEpics = combineEpics(
    processPostInvoke
)

Step two: include your epics module in src/epics/index.ts

// src/epics/index.ts
import {combineEpics} from 'redux-observable'
import {viewEpics} from 'epics/view' // Import module created at Step One

export const epics = combineEpics(
    viewEpics // Put it as an argument for combineEpics function
)

Step three: pass your custom epics as a property for <Provider /> component

import React from 'react'
import {render} from 'react-dom'
import {Provider} from '@tesler-ui/core'
import Layout from 'components/AppLayout/AppLayout'
import {epics} from 'epics' // import your src/epics/index.ts...
 // ...and pass it to customEpics property
const App = <Provider customEpics={epics}>
    <Layout />
</Provider>

render(App, document.getElementById('root'))