salvoravida / redux-immer

Redux combineReducers immer-aware!

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)

Feedback

Let me know what do you think!
Enjoy it? Star this project! :D

any idea? let me know and contribute!

Contributors

See Contributors.

License

MIT License.

redux-immer's Issues

typescript definition is missing in npm package

[email protected] package is missing the typescript definition file

You can quickly see the actual file contents if you run npm pack redux-immer and the lib/index.d.ts is missing from the file list as well as in the tarball file. Here is the terminal output:

❯ npm pack redux-immer
npm notice
npm notice 📦  [email protected]
npm notice === Tarball Contents ===
npm notice 52B   .babelrc
npm notice 7B    .eslintignore
npm notice 1.1kB LICENSE
npm notice 673B  lib/redux-immer.js
npm notice 438B  src/redux-immer.js
npm notice 484B  .eslintrc.json
npm notice 1.3kB package.json
npm notice 2.6kB README.md
npm notice === Tarball Details ===
npm notice name:          redux-immer
npm notice version:       1.0.3
npm notice filename:      redux-immer-1.0.3.tgz
npm notice package size:  3.0 kB
npm notice unpacked size: 6.6 kB
npm notice shasum:        cf295f598e6e3db86b405dc0590f7ca5efd5a966
npm notice integrity:     sha512-JOQ2uK9vKAg5a[...]7yx0TQX1FEe0Q==
npm notice total files:   8
npm notice
redux-immer-1.0.3.tgz

Clarification on use-cases

Hi,

I'm migrating from Immutable to Immer.
I came across with this package but I'm not sure if I need it or not.

My project is using redux-immutable and I was considering using the redux combineReducers.

Can anyone clarify on the features one time only produce and standard-like reducers?

Thanks!

This way of using Immer is not recommended by official documentation

At first I tried to use redux-immer as a replacement for redux-immutable while porting my code from Immutable to Immer. I've encountered some strange errors related to redux-immer and so I had to spent some time on debugging and eventually read official Immer docs more carefully. I found that official documentation specifically recommends against using single produce for all your reducers.

Quote from https://immerjs.github.io/immer/docs/example-reducer:

Note: it might be tempting after using producers for a while, to just place produce in your root reducer and then pass the draft to each reducer and work directly over said draft. Don't do that. It removes the benefit of using Redux as a system where each reducer is testable as a pure function. Immer is best used when applied to small, individual pieces of logic.

So I changed my code to use combineReducers from Redux and 1. Got rid of all errors. 2. Now have more control over reducers and how to write them. I can use mostly Immer-based reducers and still have an option to optimize critical parts by writing vanilla JS reducers at the same time.

I definitely like the approach recommended by official docs and the flexibility it provides. I think the quote from official docs should be placed in project's README.

I think this repo could be used to educate people how to use Immer properly. Because I came here naturally after using Immutable.js.

Typescript: Types of parameters 'action' and 'action' are incompatible

This happens when an action that has some more properties than 'type'

Possible fix:

export function combineReducers(
    produce: IProduce,
    reducers: ReducersMapObject
): Reducer;

To:

export function combineReducers<S>(
    produce: IProduce,
    reducers: ReducersMapObject<S, any>
): Reducer<CombinedState<S>>
export function combineReducers<S, A extends Action = AnyAction>(
    produce: IProduce,
    reducers: ReducersMapObject<S, A>
): Reducer<CombinedState<S>, A>
export function combineReducers<M extends ReducersMapObject<any, any>>(
    produce: IProduce,
    reducers: M
): Reducer<
CombinedState<StateFromReducersMapObject<M>>,
ActionFromReducersMapObject<M>>

Question: Comparison to similar libraries

Hi,

How does this library compares to the function createReducer from Redux Starter Kit?

https://redux-starter-kit.js.org/api/createReducer

Typescript typings error

Hi,

I'm currently getting typing errors when compiling a react app and can't figure out how to fix it.

Please see the screenshot below:

Navigating to the file, I can see that there are triple slash directives with references to the types but my compiler doesn't seem to be picking them up.

Here's my tsconfig if it helps:

{ "compilerOptions": { "sourceMap": false, "target": "es5", "jsx": "react", "allowJs": true, "esModuleInterop": true, "moduleResolution": "node" }, "exclude": [ "node_modules" ] }

Any ideas?