redux-as-event-bus
redux-as-event-bus turns your redux store into a fully-typed event bus.
Doing so it allows you to manage your side effects in a clean and testable way.
Getting started
Install
$ npm i redux-as-event-bus
Create the event bus and add the middleware to your store
import { prepareEventBus } from 'redux-as-event-bus'
import { applyMiddleware, createStore, Store } from 'redux'
type AppEvent = FirstEvent | SecondEvent
type AppStore = Store<AppState, AppEvent>
const { eventBus, eventBusMiddleware } = prepareEventBus<AppEvent>()
const store: AppStore = createStore(rootReducer, applyMiddleware(eventBusMiddleware)) Listen for a specific event
eventBus.onEvent('FirstEvent', (event: FirstEvent) => {
console.log(event.type) // 'FirstEvent'
})Listen for all events
eventBus.onAllEvents((event: AppEvent) => {
console.log(event.type) // 'FirstEvent' or 'SecondEvent'
})Inject dependencies
interface Dependencies {
getState: () => AppState
dispatch: Dispatch<AppEvent>
userGateway: UserGateway
}
const deps: Dependencies = {
...store,
userGateway: new GraphQlUserGateway()
}
eventBus.onEvent('CreateProject', handler(deps))
function handler(deps: Dependencies) {
return async (event: CreateProject) => {
// do async logic using store values, then dispatch new event
const userId = userIdSelector(deps.getState())
const project = prepareProjectToCreate(userId)
await deps.userGateway.createProject(project)
deps.dispatch(ProjectCreated(project))
}
}Catch handlers execution errors
eventBus.onError((error: Error) => {
console.log(error) // Some error
})Access handlers results
type HandlerResult = AppEvent[]
const { eventBus, eventBusMiddleware } = prepareEventBus<
AppEvent,
HandlerResult // to ensure typing
>()
eventBus.onResult((result: HandlerResult) => {
result.map(store.dispatch) // if results are Event you may dispatch them
})Licence
MIT