Redux-immer NPM

redux-immer

redux-immer is used to create an equivalent function of Redux combineReducers that works with immer state. Like redux-immutable but for immer

Installation

Using npm:

$ npm install --save redux-immer

Features

one time only produce
standard-like reducers
support react-router routerReducer integration (redux-first-history / react-router-redux / connected-react-router)

Usage

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!!
  }
};

Tips

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)