How to create dynamic reducer in combinereducers?

[nguyenhuutinh]

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?

[jony89]

hey @nguyenhuutinh,

If I understood you correctly, you want to create multiple components that are using the same reducer and actions?

So yes, this is exactly what this lib does. It allows u to create multiple instances of the same components (Product component in your case) and use one reducer for all of them.

If I did not answer your question please elaborate what is the issue with multi action

[sivakumar-cf]

Hey @jony89 I am also expecting the same, let me put this question in other way.
Let's say I have N instances INSTANCE1...N of Redux container component which uses the same someGenericReducer, the instance names are serving dynamically based on the server data.
Now how do I dynamically build the combineReducers with N instances of someGenericReducer?

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

[jony89]

Hey @sivakumar-cf , that is exactly what this library does.

So the code you wrote is exactly what you need to do, the someGenericReducer is the same reducer the fits to all of the containers. you just need to make sure that INSTANCE1 is the same value that was given to actionCreatorsInterceptor during creating the new container, with :

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

where are you facing an issue?

[jony89]

Now how do I dynamically build the combineReducers with N instances of someGenericReducer?

You can generate random strings for the N instances. you just need to make sure its the same value that is given to actionCreatorsInterceptor during the creation of a new container.

[sivakumar-cf]

My issue is that how do I dynamically build the reducer and passing to container depends on number of instance of the same container, for example. here my reducer is uniqueId as a variable which I want to add to the redux store.

 export const MyFirstContainerConnected = connect(
  state => ({ ...state[uniqueId]}),
  actionCreatorsInterceptor(actionCreators, uniqueId),
)(MyContainer);

and in combineReducers, I want to include reducerInterceptor dynamically as well.

[jony89]

You can try and generate random uniqueIds,

For example :

file1:

export const dynamicStrs = [
    'random1',
    'random2',
];

file2: (reducers)

import { dynamicStrs } from '../..';
const dynamicReducers = {};
dynamicContainers.forEach(id => {
  dynamicReducers[id] = reducerInterceptor(someGenericReducer, id);
});
export default combineReducers(dynamicReducers);

and the same in the containers file3 for the connect function.
for each dynamicStr (id):

export const MyFirstContainerConnected = connect(
  state => ({ ...state[id] }),
  actionCreatorsInterceptor(actionCreators, id),
)(MyContainer);