更新Redux存储中数组中的嵌套对象

Question

So I've been struggling to find the best practice on this, changing the store without mutating the store directly. Especially when it is nested.

I've seen some great articles about this but I'm still not able to figure out how to get this perfect in my scenario. ( https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns )

In my case, I have a proposals store with records and each record ( proposal ) contains a checklist which is an array that looks like this:

checklist: [
    {
      label: 'lease_sign',
      done: false
    }
],

I want to change done to true . Now I have this action being triggered by my WebSocket:

case CHECK_TODO_ITEM: {
    const { data } = action;

    // find match record
    const proposal = _.find(state.records, ['uuid', data.proposal]);
    // find match check
    const check = _.find(proposal.checklist, ['label', data.item]);
    // change check to true
    check.done = true;

    // find index of propsal in the current state
    const index = _.findIndex(state.records, (p) => p.uuid === data.proposal);

    // re-asign state
    return _.assign({}, state, {
        records: _.assign({}, state.records, {
            [index]: proposal,
        }),
    });
}

I've also tried with:

return {
    ...state,
        records: {
            ...state.records,
            [index]: {
                ...state.records[index],
                checklist,
            }
        }
    }
};

But this is still mutating the state off-course. I can't figure out what the perfect way to do this is.

If someone could help me out that would be great!

Answer 1

For me, the best library for update an immutable state is immutability-helper .

With this one, you could do something like this (idk if it works but you have the idea):

case CHECK_TODO_ITEM: {
  const index = 8; // random record index
  const index2 = 3; // random item index
  return update(state, {
    records: {      
      [index]: {
        checklist: {
          [index2]: {
            $merge: {
              done: true,
            },
          },
        },
      },
    },
  });
}

Answer 2

Just use map as below and spread operator for the object. Both map and ... are immutable operations.

 const checklist = [ { id: 1, done: false }, { id: 2, done: false }, { id: 3, done: false } ] const setDone = id => checklist.map(item => ( id === item.id ? {...item, done: true } : item )) console.log(setDone(2)); 

For checklist items use some dynamically generated unique id and refer to the corresponding state item with this id on toggle.

Answer 3

Objects are assigned by reference in ECMAScript, not by value .

By using underscore's find method, your proposal and check variables will still reference the objects in de Redux store, which you then modify directly. What you want to do is "clone" the state, or part of the state you need, at the moment your action triggers the reducer. There's multiple methods of achieving a clone:

• spread operator: newState = {...state}
• newState = JSON.parse(JSON.stringify(state))
• using lodash (since you are already using it): newState = _.cloneDeep(state)

This new state can then be modified, and subsequently be set to the store.