redux-action-watcher
v2.0.2
Published
A redux action watcher which can be used inside react components to subscribe to an action and define a callback function for it to execute.
Downloads
191
Maintainers
Readme
Redux Action Watcher
Ver 2.0.x is a complete re-write of previous package that was basically a middleware. If you were using the previous version before, only the setup part of the package has changed and subscriptions still use the old pattern. This means that you can easily upgrade by just tweaking the initial setup.
Redux action watcher is a set of a redux enhancer, reducer and a helper method that lets you watch for redux actions within your react components and bind callback functions to them. The previous versions of this package relied on component update. This limitation has now been covered with the latest revision. Redux Action Watcher is especially useful where the action creators invoked are async in nature and when you can't reliably tell which action caused the update; since there can be state changes due to other actions in-between. Another powerful usecase covered in this version is that you can watch for any action and provide a callback to be invoked even if there was no actual change in the application state.
Getting Started
To install the package using npm you can use
npm install --save redux-action-watcher
If you are using yarn you can run
yarn add redux-action-watcher
Prerequisites
This package is meant to be used with a react + redux application so your project should include both.
Usage
First thing that you need to get the package working is to add the enhancer to the store configuration. First make sure that you are importing the compose method from the redux package.
import { createStore, applyMiddleware,compose } from 'redux';
Then you will need to add the import statement for the enhancer like so:
import { watcherEnhancer } from 'redux-action-watcher';
After that you will need to register the enhancer with the store.
const enhancers = compose(
applyMiddleware(),
watcherEnhancer
);
const store = createStore(
rootReducer,
enhancers
);
Last but not the least, add the reducer that comes with the package to your reducers. Import the reducer and combineReducers methods from the respective packages
import { combineReducers } from 'redux';
import {reduxActionWatcherReducer} from 'redux-action-watcher'
Then add reducer to the array passed to combineReducers method
const rootReducer = combineReducers({
..otherReducers,
reduxActionWatcherReducer
});
Subscribing
If you have completed the setup explained above, you can now use the helper method to subscribe to actions in either the componentWillMount or componentDidMount lifecycle methods in your react components.
First import the method.
import { subscribeToWatcher } from 'redux-action-watcher';
Then in your componentWillMount or componentDidMount method, use it as follows:
subscribeToWatcher(this,[
{
action:"SOME_ACTION",
callback:()=>{
console.log("Callback Working");
},
onStateChange:true
},
]);
The first argument is the component context i-e 'this'. Second Argument is an array of objects each of which has three properties action, callback and onStateChange.
- action is the string notation of the action itself
- callback is the function that will execute as soon as state updation process from the reducer is completed.
- onStateChange is optional and will be set to true by default. If set to false it will invoke the callback regardless of a change in application state.
Unsubscribing
To prevent memory leaks it is necessary to unsubscribe from watcher in the componentWillUnmount lifecycle method. This will revoke all subscriptions on the component. Manually unsubscribing from certain actions is a work in progress and this feature will be available soon.
componentWillUnmount(){
this.unsubscribeFromWatcher();
}
Authors
- Muhammad Salman Abid
License
This project is licensed under the MIT License - see the LICENSE.md file for details