Compose and react upon redux actions
npm i redux-event
It's recommended to put the middleware creation in a separate file:
// ./store/middleware/events.js
import { eventMiddleware } from 'redux-event'
export const {
before,
onceBefore,
after,
onceAfter,
onError,
middleware,
} = eventMiddleware()
Then install the middleware:
// ./store/index.js
import { applyMiddleware, createStore } from 'redux'
import { middleware as eventMiddleware } from './middleware/events'
import reducer from './reducer'
export default createStore(reducer, applyMiddleware(eventMiddleware))
Now you can react on all actions that have been dispatched:
import { after } from './middleware/events'
import store from '.'
after('ADD_TODO', async (state, action) => {
await makeRequestToApi()
store.dispatch({type: 'TODO_ADDED', action.todo})
})
For extra type safety add the root state and actions to middleware creation:
// ./store/index.ts
export type RootState {
todos: {...}
}
export type Actions = TodoActions | OtherActions
// ./store/middleware/events.ts
import { eventMiddleware } from 'redux-event'
import { RootState, Actions } from '..'
export const {
before,
onceBefore,
after,
onceAfter,
onError,
middleware,
} = eventMiddleware<RootState, Actions>()
Before the state has been reduced.
After the state has been reduced.
Error will be swallowed in async listeners and emitted as errors. Catch them here.