Middleware, React hook which allows making side effect and listening actions of Context or Redux
In 'redux-saga', to change local state when an action is dispatched, it is necessary to change local state to globally using Redux, Context and etc. It becomes maintenance difficult if these kinds of works are repeated.
To solve this problem I made 'redux-action-listener' by inheriting the work of redux-listener.
You can make side effects and listening actions more simply and lightly than 'redux-saga'. Also, by providing a hook version, you don't have to move local state to global state.
npm i react-action-listener
yarn add react-action-listener
redux-saga
import { createMiddleware } from 'react-action-listener';
const middleware = createMiddleware();
// 1. Apply middleware.
const store = createStore(reduce, {}, applyMiddleware(middleware);
// 2. Register listener.
middleware.addListener((action, dispatch) => {
// Now you can listen 'ADD' when button is pressed.
// {"type":"ADD","payload":1}
console.log(`${JSON.stringify(action)}`);
});
const onClickPlus = () => {
// When the button is clicked, an action 'ADD' is dispatched.
// Note: You must provide property 'type'
store.dispatch({ type: 'ADD', payload: 1 });
};
return <button onClick={onClickPlus}>add</button>;
import { createMiddleware, useActionListener } from 'react-action-listener';
// 1. Apply global middleware.
const store = createStore(reduce, {}, applyMiddleware(createMiddleware()));
// 2. Use hook.
useActionListener('ADD', (action, dispatch) => {
// Now you can listen 'ADD' when the button is pressed.
// {"type":"ADD","payload":1}
console.log(`${JSON.stringify(action)}`);
});
const onClickPlus = () => {
// When the button is clicked, an action 'ADD' is dispatched.
store.dispatch({ type: 'ADD', payload: 1 });
};
return <button onClick={onClickPlus}>add</button>;
import { createMiddleware, useActionListener } from 'react-action-listener';
// Note: you must provide config.isContext = true
// You will be able to see redux-logger style logs for dispatched action when you provide isDebugContext = true
const middleware = createMiddleware({ isContext: true, isDebugContext: true });
const [state, dispatch] = useReducer(counterReducer, initialValues);
function increaseAction(dispatch) {
const action = {
type: 'ADD',
payload: 1,
};
// 1. Apply middleware.
middleware(action);
dispatch(action);
}
// 2. Use hook.
// Note: when you use Context, dispatch will not be provided as parameter.
useActionListener('ADD', (action) => {
// {"type":"ADD","payload":1}
console.log(`${JSON.stringify(action)}`);
});
You can also mix up.
import { createMiddleware, useActionListener } from 'react-action-listener';
// 1. Apply global middleware.
const middleware = createMiddleware();
useActionListener('ADD', (action, dispatch) => {
//...
});
middleware.addListener('ADD', (action, dispatch) => {
// ...
});
createMiddleware({ isContext, isDebugContext });
isContext: boolean
true
isDebugContext: boolean
true
.useActionListener(actionType, listener);
actionType: string | string[]
listener: (action, dispatch) => void
action: object
dispatch: Dispatch<AnyAction>(action: AnyAction) => AnyAction
store.dispatch
, but wrapped with setTimeout(() => {...}, 0)isContext: true
, dispatch will not be provided as parameter.Examples
See also here
Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.
Jung Hoon Park
This project is MIT licensed.