{"id":22378877,"url":"https://github.com/codebrahma/redux-action-watch","last_synced_at":"2025-07-31T01:31:37.179Z","repository":{"id":57350145,"uuid":"70915272","full_name":"Codebrahma/redux-action-watch","owner":"Codebrahma","description":"Watch/Listen actions dispatched to redux.","archived":false,"fork":false,"pushed_at":"2018-03-28T05:36:38.000Z","size":14,"stargazers_count":11,"open_issues_count":2,"forks_count":1,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-11-14T05:08:36.680Z","etag":null,"topics":["react","redux"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/redux-action-watch","language":"JavaScript","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/Codebrahma.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-14T13:59:06.000Z","updated_at":"2023-08-04T09:49:26.000Z","dependencies_parsed_at":"2022-09-16T10:10:37.148Z","dependency_job_id":null,"html_url":"https://github.com/Codebrahma/redux-action-watch","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codebrahma%2Fredux-action-watch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codebrahma%2Fredux-action-watch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codebrahma%2Fredux-action-watch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codebrahma%2Fredux-action-watch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Codebrahma","download_url":"https://codeload.github.com/Codebrahma/redux-action-watch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228204671,"owners_count":17884711,"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":["react","redux"],"created_at":"2024-12-04T23:08:11.988Z","updated_at":"2024-12-04T23:08:12.509Z","avatar_url":"https://github.com/Codebrahma.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redux-action-watch\n\n[![Build Status](https://travis-ci.org/Codebrahma/redux-action-watch.svg?branch=master)](https://travis-ci.org/Codebrahma/redux-action-watch)\n[![Coverage Status](https://coveralls.io/repos/github/Codebrahma/redux-action-watch/badge.svg?branch=master)](https://coveralls.io/github/Codebrahma/redux-action-watch?branch=master)\n\n**`redux-action-watch` provides feature to listen action dispatched to redux.**\n\n  - You can watch for a redux action dispatch.\n  - Provides some helpers to register you own function as watcher like, `onAction`, `onActionOnce`, `subscribeActions`.\n  - It can act as IPC (inter-process communication) b/w components.\n\n\u003e I don't think, we should only dispatch action to make changes in flux/redux state. Action can either change state or acknowledge that something happen. \n\n\n### Installation\n\nYou should install it as dependency:\n\n```sh\n$ npm install --save redux-action-watch\n```\n\n### Setup with redux\napp.js / index.js\n```javascript\nimport { createStore, applyMiddleware, compose, combineReducers } from 'redux';\nimport thunk from 'redux-thunk'; // optional\nimport reducers from './reducers';\nimport actionWatchMiddlewaregenerator from 'redux-action-watch/lib/middleware';\nimport actionWatchReducer from 'redux-action-watch/lib/reducer';\n// import { middleware, reducer } from 'redux-action-watch';\n\nconst initialState = {};\n// Important! name redux-action-watch reducer in your redux.\nconst actionWatcherStateName = 'watcher';\nconst reducersWithActionWatchReducer = Object.assign({}, reducers, {\n    [actionWatcherStateName]: actionWatchReducer,\n});\n\n// generate middleware\nconst actionWatchMiddleware = actionWatchMiddlewaregenerator(actionWatcherStateName);\n\nconst store = createStore(\n  combineReducers(reducersWithActionWatchReducer),\n  initialState,\n  compose(\n    /** configure middlewares with redux */\n    applyMiddleware(actionWatchMiddleware, thunk),\n    /** optional, redux dev tool */\n    window.devToolsExtension ? window.devToolsExtension() : f =\u003e f\n  )\n)\n```\n\n### How to use\n**Container**\n```javascript\nimport { connect } from 'react-redux';\nimport {\n    onAction,   // takes a action and a listener.\n    onActionOnce,   // takes a action and a listener, will called only once.\n    subscribeActions,   // takes multiple actions and listners.\n} from 'redux-action-watch/lib/actionCreators';\n\nconst mapPropsToDispatch = dispatch =\u003e ({\n    // bind dispatch function\n    subscribeActions: subscribeActions(dispatch),\n    unsubscribeActions: unsubscribeActions(dispatch),\n    onActionOnce: onActionOnce(dispatch),\n});\n\nexport default connect(null, mapPropsToDispatch)(Component);\n```\n\n**Component**\n\n```javascript\nimport React from 'react';\nimport { LOGIN_SUCCEEDED, LOGIN_FAILED } from './../actions';\nimport Notifier from './notifier';\n\nclass LoginForm extends React.Component {\n\n    componentDidMount() {\n        this.unsubscribe = this.props.onAction(LOGIN_FAILED, (action) =\u003e Notifier.show(action.error));\n        /*\n        --------------------------or---------------------------------\n        this.watchMeta = {\n            ACTION_A: fn1,\n            ACTION_B: [fn2, fn3];\n        };\n        this.unsubscribe = this.props.subscribeAction(this.watchMeta);\n        --------------------------or---------------------------------\n        // if you want to auto unsubscribe after once call.\n        this.props.onActionOnce(ACTION_A, callMeOnceFunction);\n        */\n    }\n    \n    componentWillUnmount() {\n        this.unsubscribe();\n    }\n    \n    render() {\n        // Your code ........\n    }\n\n}\n```\n\n### Documentation\nNote:- All functions should first call with `dispatch`\n\n- `subscribeAction(dispatch)(listenersObj)`  \nIt can register watcher for more than one actions.  \n**Argument**  \n`listenersObj`: It should be an object where keys will be action `type` and value will be listener or array of listeners. Example: `{ ACTION_A: func1, ACTION_B: [func2, func3] }`.  \n**Returns**  \n`unsubscribeFunc`: It returns function. Which should invoke to unsubscribe those listeners.\n\n- `unsubscribeAction(dispatch)(listenersObj)`  \nIt can un-subscribe actions which subscribe by `subscribeAction` function. It takes same `listenersObj` used at time of subscription.  \n**Argument**  \n`listenersObj`: Same as above.\n\n- `onAction(dispatch)(actionType, listener)`  \nIt can register a watcher/listener for a action.  \n**Arguments**  \n`actionType`: Type/name of action. Example, `const action = { type: ACTION_A }`. Here `ACTION_A` is actionType.  \n`listener`: Function which will be invoke on action dispatch.  \n**Returns**  \n`unsubscribeFunc`: It returns function. Which should invoke to unsubscribe that listener.  \n\n- `onActionOnce(dispatch)(actionType, listener)`  \nIt can register a watcher/listener for a action. And it will automatically un-subscribe after once invoke.  \n**Arguments**  \n`actionType`: Type/name of action. Example, `const action = { type: ACTION_A }`. Here `ACTION_A` is actionType.  \n`listener`: Function which will be invoke on action dispatch.  \n**Returns**  \n`unsubscribeFunc`: It returns function. You can unsubscribe without once invoke.\n\n### Development\n\nWant to contribute? Great!\n\n- Clone this repo\n- Make changes\n- Run test case `npm run test`\n- Create pull request\n\n### Todos\n\n - Write example application\n\nLicense\n----\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebrahma%2Fredux-action-watch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodebrahma%2Fredux-action-watch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebrahma%2Fredux-action-watch/lists"}