React Redux-更新状态中的嵌套数组

Question

我在React Redux中尝试一些应用程序，并且在状态中更新（推送，删除，更新）嵌套数组时遇到问题。

我有一些这样的对象，称为服务：

{
    name: 'xzy',
    properties: [
       { id: 1, sName: 'xxx'},
       { id: 2, sName: 'zzz'}, 
    ]
}

我在具有属性集合的reducer中所做的一切（在向集合中添加属性的情况下）都会产生问题，即所有属性都具有与我最近添加的最后一个属性相同的值->添加的属性对象位于服务属性集合中，但操作会替换所有值在此集合的所有属性中。 我的减速器：

export function service(state = {}, action) {
        switch (action.type) {
            case 'ADD_NEW_PROPERTY':
                console.log(action.property) // correct new property
                const service = {
                    ...state, properties: [
                        ...state.properties, action.property
                    ]
                }
                console.log(service); // new property is pushed in collection but all properties get same values
                return service

            default:
                return state;
        }
    }

我已经尝试过使用immutability-helper库的一些解决方案，它会产生相同的问题：

export function service(state = {}, action) {
    case 'ADD_NEW_PROPERTY':

                return update(state, {properties: {$push: [action.property]}})

            default:
                return state;
        }

例如，当我在上面的示例中添加新属性{ id: 1, sName: 'NEW'}时，我将获得以下状态：

{
    name: 'xzy',
    properties: [
       { id: 1, sName: 'NEW'},
       { id: 1, sName: 'NEW'}, 
       { id: 1, sName: 'NEW'}
    ]
}

有人可以帮忙吗？ :)

Answer 1

还要复制action.property 。 无论调度此操作是什么，它都可能在重用同一对象。

 export function service(state = {}, action) { switch (action.type) { case 'ADD_NEW_PROPERTY': console.log(action.property) // correct new property const service = { ...state, properties: [ ...state.properties, { ...action.property } ] } console.log(service); // new property is pushed in collection but all properties get same values return service default: return state; } } 

Answer 2

我建议您使用不可变数据https://facebook.github.io/immutable-js/docs/#/List

import { fromJS, List } from 'immutable';

const initialState = fromJS({
  propeties: List([{ id: 1, sName: 'xyz' }]
}

function reducer(state = initialState, action) {
  case ADD_NEW_PROPERTY:
    return state
      .update('properties', list => list.push(action.property));
 // ...
}

Answer 3

您的服务缩减器应该看起来像这样：

// Copy the state, because we're not allowed to overwrite the original argument
const service = { ...state }; 
service.properties.append(action.property)
return service

Answer 4

返回状态之前，应始终复制状态。

  export default function(state = {}, action) {
  switch(action.type) {
    case 'GET_DATA_RECEIVE_COMPLETE': {
      const data  = action.firebaseData;
      const newState = Object.assign({}, state, {
        data
      });

      return newState
    }
    default:
      return state;

  }
}