redux-event
Compose and react upon redux actions
Installation
npm i redux-event
Use
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})
})
Typescript
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>()
Listening to events
before()
Before the state has been reduced.
after()
After the state has been reduced.
onError()
Error will be swallowed in async listeners and emitted as errors. Catch them here.