redux-immer is used to create an equivalent function of Redux combineReducers that works with immer state.
Like redux-immutable but for immer
Using npm:
$ npm install --save redux-immer
- one time only produce
- standard-like reducers
- support react-router routerReducer integration (
redux-first-history/react-router-redux/connected-react-router)
store.js
import { createStore, applyMiddleware } from 'redux';
import { combineReducers } from 'redux-immer';
import produce from 'immer';
// Reducers
import { user } from './user';
import { catalog } from './catalog';
export const store = createStore(
combineReducers(produce, {
user,
catalog,
// ...
}),
// applyMiddleware...
);user.js
const initialState = {
id: null,
profile: {}
};
export const user = (state = initialState, action) => {
switch (action.type) {
case LOAD_USER:
state.id = action.id;
state.profile = action.profile;
return state; // or just return; (immer way)
default:
return state; //important return state on default for initialState!!
}
};catalog.js
const initialState = [];
export const catalog = (state = initialState, action) => {
switch (action.type) {
case LOAD_CATALOG:
state = action.data;
return state; // or just return; (immer way)
default:
return state; //important return draft on default for initialState!!
}
};You may call combineReducers at any level of the reducer hierarchy. It doesn't have to happen at the top. In fact you may use it again to split the child reducers that get too complicated into independent grandchildren, and so on. (exact as original redux.combineReducer https://redux.js.org/api/combinereducers)
Let me know what do you think!
Enjoy it? Star this project! :D
any idea? let me know and contribute!
See Contributors.