Redux将嵌套值添加到当前状态

Question

I have the following state:

{
  list: {
    key1: {
      value: [{a: 'a'}, {b: 'b'}],
      fetching: true
    },
    key2: {
      value: [{c: 'c'}],
      fetching: true
    }
  }
}

I want to provide a new value for some key, and replace current state with this. But I also want the value to be concated with the previous one. So for example with the following action:

key1: {
  value: [{d: 'd'}],
  fetching: false
}

I would get the following state:

{
  list: {
    key1: {
      value: [{a: 'a'}, {b: 'b'}, {d: 'd'}],
      fetching: false
    },
    key2: {
      value: [{c: 'c'}],
      fetching: true
    }
  }
}

How can I do that inside a reducer, so that the case remains immutable? (using ... spread operator, not ImmutableJS ).

EDIT:

Part of the reducer that handles (should to) that:

case "FOO_BAR":
  const key = action.payload.key;
  const newList = {...state.list};
  newList[key] = action.payload.newObject; // {value: ..., fetching: ...}
  return {
    ...state,
    list: newList
  }

Answer 1

It's how I'd like to solve it

case "FOO_BAR":
  const oldList = {...state.list};
  const newKey1Value = action.payload.key.value;
  oldList.key1.value = oldList.key1.value.concat(newKey1Value);
  const newKey1fetching  = action.payload.key.fetching;
  oldList.key1.fetching =  newKey1fetching;
  return {
    ...state,
    list: oldList
  }

I hope it helps you.

Answer 2

You will need to use the spread operator to spread the old values and then spread the newObject[key] value array.

Something like this:

import { get } from 'lodash';

case "FOO_BAR":
  const { key, newObject } = action.payload;
  const newList = {
    ...state.list, 
    [key]: {
      value: [...get(state, 'list[key].value', []), ...newObject[key].value]
      fetching: newObject[key].fetching
    }
  };
  return {
    ...state,
    list: newList
  }

Edit: I added the get utility function from lodash so that if state.list[key] is undefined , it will return an empty array to spread rather than throwing an error.