Redux-subscribe-action NPM

redux-subscribe-action

Subscribe to dispatched redux actions

The motivation was to handle dispatched actions to dispatch other thanks to redux-thunk.

Installation

To install redux-subscribe-action, run the following command:

npm install --save redux-subscribe-action

Or if you are using yarn:

yarn add redux-subscribe-action

Setup with redux

To enable redux-subscribe-action, use applyMiddleware():

import { createStore, applyMiddleware } from 'redux';
import subscribeActionMiddleware from 'redux-subscribe-action';
import rootReducer from './reducers';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(subscribeActionMiddleware)
);

Usage

`subscribeBefore(listener)`

Adds a listener. It will be called every time an action is dispatched before the state changed.

It takes a callback as argument and returns a function that unsubscribe the listener. The dispatched action is given to the callback.

Example:

import { subscribeBefore } from 'redux-subscribe-action';

const unsubscribe = subscribeBefore((action) => console.log(`Before state change action ${action.type}`));

//...

unsubscribe();

`subscribeAfter(listener)`

Adds a listener. It will be called every time an action is dispatched after the state changed.

It takes a callback as argument and returns a function that unsubscribe the listener. The dispatched action is given to the callback.

Example:

import { subscribeAfter } from 'redux-subscribe-action';

const unsubscribe = subscribeAfter((action) => console.log(`Before state change action ${action.type}`));

//...

unsubscribe();

`subscribeActionBefore(action, listener)`

Adds a listener. It will be called when the given action is dispatched before the state changed.

It takes an action type and a callback as arguments and returns a function that unsubscribe the listener. The dispatched action is given to the callback.

Example:

import { subscribeActionBefore } from 'redux-subscribe-action';

const unsubscribe = subscribeActionBefore('MY_ACTION_TYPE', (action) => console.log(`Before state change action MY_ACTION_TYPE`));
// action.type === 'MY_ACTION_TYPE'

//...

unsubscribe();

`subscribeActionAfter(action, listener)`

Adds a listener. It will be called when the given action is dispatched after the state changed.

It takes an action type and a callback as arguments and returns a function that unsubscribe the listener. The dispatched action is given to the callback.

Example:

import { subscribeActionAfter } from 'redux-subscribe-action';

const unsubscribe = subscribeActionAfter('MY_ACTION_TYPE', (action) => console.log(`After state change action MY_ACTION_TYPE`));
// action.type === 'MY_ACTION_TYPE'

//...

unsubscribe();

Typescript `listener` type

Listener type is defined with TypeScript as Listener.

type Listener = (action: Action) => void;

With Action as redux Action type (import { Action } from 'redux').

Example:

import { Listener } from 'redux-subscribe-action';
import { Action } from 'redux';

const myListener: Listener = (action: Action) => {
    //...
}

unsubscripe methods

The package exposes following unsubscribe methods:

unsubscribeBefore(): unsubscribe all general before listeners
unsubscribeActionsBefore(): unsubscribe all before action listeners
unsubscribeAfter(): unsubscribe all general after listeners
unsubscribeActionsAfter(): unsubscribe all after action listeners
unsubscribeAll(): unsubscribe from every listener
unsubscribeActionBefore(action: string): unsubscribe all before listeners corresponding to the passed action
unsubscribeActionAfter(action: string): unsubscribe all after listeners corresponding to the passed action
unsubscribeAction(action: string): unsubscribe all listeners corresponding to the passed action