Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qkreltms/react-action-listener
Middleware, React hook which allows making side effect and listening actions of Context or Redux
https://github.com/qkreltms/react-action-listener
context-api hook listening-actions react react-context redux redux-action-listener
Last synced: 8 days ago
JSON representation
Middleware, React hook which allows making side effect and listening actions of Context or Redux
- Host: GitHub
- URL: https://github.com/qkreltms/react-action-listener
- Owner: qkreltms
- License: mit
- Created: 2020-12-11T07:07:23.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T07:03:35.000Z (almost 2 years ago)
- Last Synced: 2024-09-23T08:11:26.011Z (about 2 months ago)
- Topics: context-api, hook, listening-actions, react, react-context, redux, redux-action-listener
- Language: TypeScript
- Homepage:
- Size: 521 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-action-listener
[](https://www.npmjs.com/package/react-action-listener)
[](https://github.com/qkreltms/react-action-listener/blob/master/LICENSE)
[
](Observer_SC2_Head1)
> Middleware, React hook which allows making side effect and listening actions of Context or Redux
## Motivation
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](https://github.com/Gaya/redux-listeners).
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.
## Install
```sh
npm i react-action-listener
yarn add react-action-listener
```
## Usages
### Much like `redux-saga`
```ts
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 add;
```
### Hook
```ts
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 add;
```
### Context
```ts
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)}`);
});
```
### Hybrid
You can also mix up.
```ts
import { createMiddleware, useActionListener } from 'react-action-listener';
// 1. Apply global middleware.
const middleware = createMiddleware();
useActionListener('ADD', (action, dispatch) => {
//...
});
middleware.addListener('ADD', (action, dispatch) => {
// ...
});
```
## API
```js
createMiddleware({ isContext, isDebugContext });
```
- `isContext: boolean`
- When you want to use middleware with Context you must provide this to `true`
- Note: You will not be able to use middleware with Redux.
- `isDebugContext: boolean`
- When you use middleware with Context, you can also log dispatched actions by setting it `true`.
```js
useActionListener(actionType, listener);
```
- `actionType: string | string[]`
- The action type or an array of action types to match.
- `listener: (action, dispatch) => void`
- The callback function which will be called when an action of specified types is dispatched.
- `action: object`
- Dispatched action.
- `dispatch: Dispatch(action: AnyAction) => AnyAction`
- Equals with `store.dispatch`, but wrapped with setTimeout(() => {...}, 0)
- By using this, you can ensure another action in listener can be dispatched as soon as the first dispatching action is completed.
- Note: when you set `isContext: true`, dispatch will not be provided as parameter.
## Links
- Examples
- [Counters](https://codesandbox.io/s/react-action-listener-5we8j?file=/src/reducer.ts)
- [Counters (hook)](https://codesandbox.io/s/react-action-listener-counter-example-0dti5?file=/src/reducer.ts)
- [Counters (Context)](https://codesandbox.io/s/react-action-listener-context-s748z?file=/src/Counter.tsx)
See also [here](./examples)
## Contributing
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/qkreltms/react-action-listener/issues). You can also take a look at the [contributing guide](https://github.com/qkreltms/react-action-listener/blob/master/CONTRIBUTING.md).
## Contributors
**Jung Hoon Park**
## License
This project is [MIT](https://github.com/qkreltms/react-action-listener/blob/master/LICENSE) licensed.
---