jony89 / reducer-action-interceptor

Intercept easily your action creators and reducers

reducer-action-interceptor

These plugin allows you on one hand to intercept action creators in order to patch the action before bubbling up to the reducers, and on the other hand to intercept the reducers in order to take advantage of that interception.

For example, one can use this to create multiple instances of the same container within the same page, without one affecting the other.

• Works well with redux-thunk

• Follows FSA

React example

Let's say we want two instances of MyContainer.

MyContainer should export it's actionCreators object. Usually this object passed to the connect function where the mapDispatchToProps attribute comes in. These are the actions that we will intercept.

Now we can create two instances :

import { connect } from 'react-redux';
import { actionCreatorsInterceptor } from 'reducer-action-interceptor';
import MyContainer, { actionCreators } from '../MyContainer';

/**
 * First Container 
**/
export const MyFirstContainerConnected = connect(
  state => ({ ...state.firstContainerReducer }),
  actionCreatorsInterceptor(actionCreators, 'INSTANCE1'),
)(MyContainer);

/**
 * Second Container 
**/
export const MySecondContainerConnected = connect(
  state => ({ ...state.secondContainerReducer }),
  actionCreatorsInterceptor(actionCreators, 'INSTANCE2'),
)(MyContainer);

Obviously, we need to take care of the reducers as well. using the HOR - reducerInterceptor :

import { combineReducers } from 'redux';
import { reducerInterceptor } from 'reducer-action-interceptor';
import someGenericReducer from './someGenericReducer.reducer';

export default combineReducers({
  firstContainerReducer: reducerInterceptor(someGenericReducer, 'INSTANCE1'),
  secondContainerReducer: reducerInterceptor(someGenericReducer, 'INSTANCE2'),
});

And we are done, each action for each action is solely for that container.

The values INSTANCE1, INSTANCE2, can be anything you like, even a random number!

More over, the intercepted reducers can still accept non-intercepted actions, so no worries, you are still able to listen to other actions raised from all over the app.

reducer-action-interceptor's Issues

How to create dynamic reducer in combinereducers?

How to create dynamic reducer?

export default combineReducers({
firstContainerReducer: reducerInterceptor(someGenericReducer, 'INSTANCE1'),
secondContainerReducer: reducerInterceptor(someGenericReducer, 'INSTANCE2'),
});

I call API to get the category list and theirs products.

So I want to use multi instance of Product Components. But the issue is have to create multi action . Do your solution can resolve my problem?