{"id":18095185,"url":"https://github.com/qkreltms/react-action-listener","last_synced_at":"2026-05-10T05:01:44.167Z","repository":{"id":44593155,"uuid":"320495039","full_name":"qkreltms/react-action-listener","owner":"qkreltms","description":"Middleware, React hook which allows making side effect and listening actions of Context or Redux","archived":false,"fork":false,"pushed_at":"2022-12-02T07:03:35.000Z","size":534,"stargazers_count":8,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T12:59:15.820Z","etag":null,"topics":["context-api","hook","listening-actions","react","react-context","redux","redux-action-listener"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qkreltms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-11T07:07:23.000Z","updated_at":"2024-10-25T19:00:41.000Z","dependencies_parsed_at":"2023-01-22T12:15:19.253Z","dependency_job_id":null,"html_url":"https://github.com/qkreltms/react-action-listener","commit_stats":null,"previous_names":["qkreltms/redux-action-listener-hook"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qkreltms%2Freact-action-listener","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qkreltms%2Freact-action-listener/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qkreltms%2Freact-action-listener/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qkreltms%2Freact-action-listener/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qkreltms","download_url":"https://codeload.github.com/qkreltms/react-action-listener/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245761280,"owners_count":20667895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["context-api","hook","listening-actions","react","react-context","redux","redux-action-listener"],"created_at":"2024-10-31T19:09:24.559Z","updated_at":"2026-05-10T05:01:39.126Z","avatar_url":"https://github.com/qkreltms.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-action-listener\n\n[![Version](https://img.shields.io/npm/v/react-action-listener.svg)](https://www.npmjs.com/package/react-action-listener)\n[![License: MIT](https://img.shields.io/github/license/qkreltms/react-action-listener)](https://github.com/qkreltms/react-action-listener/blob/master/LICENSE)\n\n[\u003cimg src=\"https://user-images.githubusercontent.com/25196026/108624179-8cb45400-7486-11eb-9e1e-0a60967ffece.jpg\" width=\"150\"/\u003e](Observer_SC2_Head1)\n\n\u003e Middleware, React hook which allows making side effect and listening actions of Context or Redux\n\n![react-action-listener](https://user-images.githubusercontent.com/25196026/123260477-9206d580-d530-11eb-8ac0-741d4260d4b4.gif)\n\n## Motivation\n\nIn '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.\n\nTo solve this problem I made 'redux-action-listener' by inheriting the work of [redux-listener](https://github.com/Gaya/redux-listeners). \n\nYou 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.\n\n## Install\n\n```sh\nnpm i react-action-listener\nyarn add react-action-listener\n```\n\n## Usages\n\n### Much like `redux-saga`\n\n```ts\nimport { createMiddleware } from 'react-action-listener';\n\nconst middleware = createMiddleware();\n// 1. Apply middleware.\nconst store = createStore(reduce, {}, applyMiddleware(middleware);\n\n// 2. Register listener.\nmiddleware.addListener((action, dispatch) =\u003e {\n  // Now you can listen 'ADD' when button is pressed.\n  // {\"type\":\"ADD\",\"payload\":1}\n  console.log(`${JSON.stringify(action)}`);\n});\n\nconst onClickPlus = () =\u003e {\n  // When the button is clicked, an action 'ADD' is dispatched.\n  // Note: You must provide property 'type'\n  store.dispatch({ type: 'ADD', payload: 1 });\n};\n\nreturn \u003cbutton onClick={onClickPlus}\u003eadd\u003c/button\u003e;\n```\n\n### Hook\n\n```ts\nimport { createMiddleware, useActionListener } from 'react-action-listener';\n// 1. Apply global middleware.\nconst store = createStore(reduce, {}, applyMiddleware(createMiddleware()));\n\n// 2. Use hook.\nuseActionListener('ADD', (action, dispatch) =\u003e {\n  // Now you can listen 'ADD' when the button is pressed.\n  // {\"type\":\"ADD\",\"payload\":1}\n  console.log(`${JSON.stringify(action)}`);\n});\n\nconst onClickPlus = () =\u003e {\n  // When the button is clicked, an action 'ADD' is dispatched.\n  store.dispatch({ type: 'ADD', payload: 1 });\n};\n\nreturn \u003cbutton onClick={onClickPlus}\u003eadd\u003c/button\u003e;\n```\n\n### Context\n\n```ts\nimport { createMiddleware, useActionListener } from 'react-action-listener';\n// Note: you must provide config.isContext = true\n// You will be able to see redux-logger style logs for dispatched action when you provide isDebugContext = true\nconst middleware = createMiddleware({ isContext: true, isDebugContext: true });\n\nconst [state, dispatch] = useReducer(counterReducer, initialValues);\n\nfunction increaseAction(dispatch) {\n  const action = {\n    type: 'ADD',\n    payload: 1,\n  };\n\n  // 1. Apply middleware.\n  middleware(action);\n  dispatch(action);\n}\n\n// 2. Use hook.\n// Note: when you use Context, dispatch will not be provided as parameter.\nuseActionListener('ADD', (action) =\u003e {\n  // {\"type\":\"ADD\",\"payload\":1}\n  console.log(`${JSON.stringify(action)}`);\n});\n```\n\n### Hybrid\n\nYou can also mix up.\n\n```ts\nimport { createMiddleware, useActionListener } from 'react-action-listener';\n// 1. Apply global middleware.\nconst middleware = createMiddleware();\n\nuseActionListener('ADD', (action, dispatch) =\u003e {\n  //...\n});\n\nmiddleware.addListener('ADD', (action, dispatch) =\u003e {\n  // ...\n});\n```\n\n## API\n\n```js\ncreateMiddleware({ isContext, isDebugContext });\n```\n\n- `isContext: boolean`\n  - When you want to use middleware with Context you must provide this to `true`\n  - Note: You will not be able to use middleware with Redux.\n- `isDebugContext: boolean`\n  - When you use middleware with Context, you can also log dispatched actions by setting it `true`.\n\n```js\nuseActionListener(actionType, listener);\n```\n\n- `actionType: string | string[]`\n  - The action type or an array of action types to match.\n- `listener: (action, dispatch) =\u003e void`\n  - The callback function which will be called when an action of specified types is dispatched.\n  - `action: object`\n    - Dispatched action.\n  - `dispatch: Dispatch\u003cAnyAction\u003e(action: AnyAction) =\u003e AnyAction`\n    - Equals with `store.dispatch`, but wrapped with setTimeout(() =\u003e {...}, 0)\n    - By using this, you can ensure another action in listener can be dispatched as soon as the first dispatching action is completed.\n    - Note: when you set `isContext: true`, dispatch will not be provided as parameter.\n\n## Links\n\n- Examples\n\n  - [Counters](https://codesandbox.io/s/react-action-listener-5we8j?file=/src/reducer.ts)\n  - [Counters (hook)](https://codesandbox.io/s/react-action-listener-counter-example-0dti5?file=/src/reducer.ts)\n  - [Counters (Context)](https://codesandbox.io/s/react-action-listener-context-s748z?file=/src/Counter.tsx)\n\n    See also [here](./examples)\n\n## Contributing\n\nContributions, issues and feature requests are welcome!\n\nFeel 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).\n\n## Contributors\n\n**Jung Hoon Park**\n\u003cbr/\u003e\n\n## License\n\nThis project is [MIT](https://github.com/qkreltms/react-action-listener/blob/master/LICENSE) licensed.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqkreltms%2Freact-action-listener","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqkreltms%2Freact-action-listener","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqkreltms%2Freact-action-listener/lists"}