https://github.com/salvoravida/redux-immer

Redux combineReducers immer-aware!
https://github.com/salvoravida/redux-immer

combinereducers immer immutable redux redux-immer redux-immutable

Last synced: 6 days ago
JSON representation

Redux combineReducers immer-aware!

• Host: GitHub
• URL: https://github.com/salvoravida/redux-immer
• Owner: salvoravida
• License: mit
• Created: 2019-05-22T05:00:24.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-03T14:36:07.000Z (over 1 year ago)
• Last Synced: 2024-10-16T18:53:07.654Z (21 days ago)
• Topics: combinereducers, immer, immutable, redux, redux-immer, redux-immutable
• Language: JavaScript
• Homepage:
• Size: 1.02 MB
• Stars: 77
• Watchers: 2
• Forks: 4
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# redux-immer  [![npm version](https://img.shields.io/npm/v/redux-immer.svg?style=flat)](https://www.npmjs.org/package/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](https://www.npmjs.com/):

    $ 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

```javascript

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 

```javascript

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 

```javascript

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](https://github.com/salvoravida/redux-immer/graphs/contributors).

License

-------

[MIT License](https://github.com/salvoravida/redux-immer/blob/master/LICENSE.md).