How to update multiple state properties with immer.js

Question

I wonder if it is possible to update multiple properties of state with immer.js in one "call".

Say I have state:

export const initialState = {
  isUserLogged: false,
  menuIsClosed: false,
  mobileMenuIsClosed: true,
  dataArray: ["dog","cat"],
};

And action creator:

export function updateSearchPage(data) {
  return {
    type: UPDATE_SEARCH_PAGE,
    payload: data
  };
}

I then use that action creator in React component like this:

  this.props.updateSearchPage({
    isUserLogged: true,
    menuIsClosed: true,
    dataArray: ["dog","cat","owl"]
  })

The idea is that I want to update several properties of state at the same time. But I dont know which properties it is in advance. I know how to do it with a simple reducer:

case UPDATE_SEARCH_PAGE:
  return Object.assign({}, state, action.payload)

But how to update several properties of state with immer at the same time? When the state properties (which one should update) are unknown in advance.

keul · Accepted Answer · 2019-01-10T10:51:57.200

9

You can cycle on action.payload like the following:

const yourReducer = (state, action) =>
  produce(state, draft => {
    switch (action.type) {
      case UPDATE_SEARCH_PAGE:
        Object.entries(action.payload).forEach(([k, v]) => {
          draft[k] = v;
        })
        break;
    // ... other
    }
  }

Also: remember that on recent versions of immer is perfectly legit to returns an object, so doing return Object.assign({}, state, action.payload) is still valid inside a produce call.

edited Jan 10 '19 at 10:51

answered Jan 10 '19 at 10:41

keul

7,673
20
45

Ok thx, can you please update your answer regarding Object.assign, with example inside `produce`? :) – user1665355 Jan 10 '19 at 10:43
Done... but it's clearly documented on the immer's doc: https://github.com/mweststrate/immer#reducer-example – keul Jan 10 '19 at 10:52
Thanks for the link and answer. – user1665355 Jan 10 '19 at 11:26
just a question, what is the best way to restore initialState with Immer? Like `draft = undefined` or `draft = initialState` , when `case RESET_SEARCH_PAGE`? – user1665355 Jan 10 '19 at 15:37
Just `return initialState` for what I wrote at the bottom of the answer – keul Jan 10 '19 at 16:30
So you mean `case RESET_SEARCH_PAGE: Object.assign({}, state, initialState ); break;` ? So `state` here and not `draft`, correct? – user1665355 Jan 11 '19 at 08:07
If I get your question: just `case RESET_SEARCH_PAGE: return initialState;` – keul Jan 11 '19 at 08:16

score 4 · Answer 2 · answered Nov 22 '19 at 17:06

With ES6 you can do it this way:

export const state = produce((draft, action) => {
  switch (type) {
    case UPDATE_SEARCH_PAGE:
      return {...draft, ...action.payload}
  }
}, initialState)

In this case it works the same way as without Immer. All properties will be merged (shallow merge) into state. If you need to replace the state just return action.payload

0xc14m1z · Answer 3 · 2019-01-10T10:43:44.547

2

Immer gives you a draft state that you can edit. Behind the scenes it uses ES6 proxies to discover what you changed and apply in an immutable way your edits to the original state.

Basically, you can do the exact same thing you do right now, but using the Immer api:

import produce from 'immer'

const newState = produce(this.state, draft => Object.assign({}, draft, payload))

If you, instead, know what properties are changed, you can do something like:

const newState = produce(this.state, draft => {
  draft.propertyOne = 'newValue'
  draft.propertyTwo = 42
})

edited Jan 10 '19 at 10:43

answered Jan 10 '19 at 10:09

0xc14m1z

3,675
1
14
23

Thanks for the answer! – user1665355 Jan 10 '19 at 11:28
@0xc14m1z, I think the the assignment of props to `draft` should be `Object.assign({draft, payload)`. i.e. you can update the `draft` directly. – Hooloovoo13 May 03 '22 at 06:20

How to update multiple state properties with immer.js

3 Answers3