1.1.0 • Published 5 years ago
redux-event-bus v1.1.0
redux-event-bus
Middleware for redux that allows you to subscribe to actions that are dispatched to a redux store.
Installation
Install the package
npm install --save redux-event-bus
Then, to enable redux-event-bus:
const {
EventBus,
createEventBusMiddleware
} = require("redux-event-bus");
const {
applyMiddleware,
createStore
} = require("redux");
const rootReducer = require("./reducers/index");
const evBus = new EventBus();
const evBusMiddleware = createEventBusMiddleware(evBus);
const store = createStore(
rootReducer,
applyMiddleware(evBusMiddleware)
);
If you are using other middlewares
const {
EventBus,
createEventBusMiddleware
} = require("redux-event-bus");
const {
applyMiddleware,
compose,
createStore
} = require("redux");
const rootReducer = require("./reducers/index");
const evBus = new EventBus();
const middlewares = [
//Other middlewares
createEventBusMiddleware(evBus),
];
const store = createStore(
rootReducer,
compose(applyMiddleware(...middlewares))
);
If you are using ES6 Imports, replace the line below using require with the import statement below in either example above.
//replace
const {
EventBus,
createEventBusMiddleware
} = require("redux-event-bus");
//with
import {
EventBus,
createEventBusMiddleware
} from "redux-event-bus";
Usage
Listen for events for a particular action
const store = createStore(reducers, middleware);// From above
//Imports
const evBus = new EventBus();
// Hook into redux e.x.: applyMiddleware
evBus.takeEvery("USER_LOGGED_IN", (action) => {
if(action.user.isAdmin) {
console.log("User is admin");
}
});
store.dispatch({
type: "USER_LOGGED_IN"
user: {
isAdmin: true
}
}); //Will call function above
store.dispatch({
type: "USER_LOGGED_IN"
user: {
isAdmin: false
}
}); //Will call function above
Listen for events for a particular action only once
const store = createStore(reducers, middleware);// From above
//Imports
const evBus = new EventBus();
// Hook into redux e.x.: applyMiddleware
evBus.takeOne("USER_LOGGED_IN", (action) => {
if(action.user.isAdmin) {
console.log("User is admin");
}
});
store.dispatch({
type: "USER_LOGGED_IN"
user: {
isAdmin: true
}
}); //Will call function above
store.dispatch({
type: "USER_LOGGED_IN"
user: {
isAdmin: false
}
}); //Will not call function above since it already has been called.
Cancel events
const store = createStore(reducers, middleware);// From above
//Imports
const evBus = new EventBus();
// Hook into redux e.x.: applyMiddleware
const cancelListener = evBus.takeEvery("USER_LOGGED_IN", (action) => {});
cancelListener();
store.dispatch({
type: "USER_LOGGED_IN"
user: {
isAdmin: true
}
}); //Will not call listener above since it was cancelled.
const handler = (action) => {};
evBus.takeOne("USER_LOGGED_IN", handler);
evBus.cancel("USER_LOGGED_IN", handler);
store.dispatch({
type: "USER_LOGGED_IN"
user: {
isAdmin: true
}
}); //Will not call listener above since it was cancelled.
License
Copyright 2018 Jonah Nestrick
MIT License