README
Redux Wiretap
redux-wiretap
is a Redux middleware that allows you to spy on actions as they arrive at your store. This allows you to react to your app's state without changing it's logic - e.g. for making requests to a tracking API.
Install
npm i @15gifts/redux-wiretap
Usage
Import the library into your store file and add it to your middleware array as the last element.
import { applyMiddleware, createStore } from 'redux';
import reduxWiretap from '@15gifts/redux-wiretap';
import reducers from './reducers';
const initialState = {};
const wiretapConfig = {};
const wiretap = reduxWiretap(wiretapConfig);
const store = createStore(reducers, initialState, applyMiddleware(wiretap));
Config
The config passed into the reduxWiretap
function can contain the following properties:
{
// A function that always gets called before an action is executed
beforeAnyAction: (contextVariables) => {},
// A function that gets called before `callback` if the `point` is valid
beforeCallback: (data, contextVariables) => {},
// A function that will get called if the `point` is valid
callback: (data, contextVariables) => {},
// A function that gets called after `callback` if the `point` is valid
afterCallback: (data, contextVariables) => {},
// A function that always gets called after an action is executed
afterAnyAction: (contextVariables) => {},
// Default value for global variables that are passed between callback functions
vars: {},
// Array of point config objects that decide if the `callback` function is called
points: [
{
// The action(s) to look for (this can be an array of strings)
triggerAction: 'ACTION_TYPE',
logic: (contextVariables) => {
return {
// This can be anything - passed as the first argument into the callbacks
data: {},
// This boolean controls if the callback is executed (defaults true)
shouldFire: true,
};
},
},
],
}
contextVariables
This object is passed into each point's logic
function and into all of the callback functions. It has the following properties:
{
action, // The current action
config, // The config passed into the `reduxWiretap` function at the start
nextState, // The store as it will be after the action is applied
prevState, // The store as it was before the action was applied
getVars(), // Function to get the global variables
setVars(vars), // Function to set the global variables
}
and getVarssetVars
These functions allow you to read and update the global variables that are passed between callback functions. The initial value is taken from the config
passed in at the start, or an empty object if the field is omitted.
...
const wiretap = reduxWiretap({
vars: { id: 1 },
callback: ({ getVars, setVars }) => {
const vars = getVars();
const id = vars.id + 1;
setVars({ ...vars, id });
},
points: [{ triggerAction: 'COUNTER_INCREMENT' }],
});
...
// vars = { id: 1 }
store.dispatch({ type: 'COUNTER_INCREMENT' });
// vars = { id: 2 }
shouldFire
This property, returned by the logic
function of a point config object, determines whether or not the callbacks will be called. Because it has access to contextVariables
, you can do things such as compare the previous and next states of the redux store and conditionally call the callback functions.
{
points: [
{
triggerAction: 'COUNTER_INCREMENT',
logic: ({ prevState, nextState }) => {
return {
callback: () => {
// Call API to report that an increment greater than 1 has occured
},
shouldFire: nextState.counterValue - prevState.counterValue > 1,
};
},
}
],
}
Next Steps
The next features we're looking to add are:
- Fire callbacks on simple value changes (non-objects) as an alternative to actions
License
MIT