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

Question

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

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

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

无论我在带有属性集合的减速器中做了什么（在将属性添加到集合的情况下）都会产生问题，即所有属性的值都与我最近添加的最后一个值相同 -> 添加属性对象在服务属性集合中，但该操作替换了该集合中所有属性中的所有值。我的减速机：

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

您的服务减速器可能看起来像这样：

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

Answer 2

您应该始终在返回之前复制状态。

  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;

  }
}

Answer 3

也复制一份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 4

我建议你使用不可变数据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));
 // ...
}

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

React redux - updating nested array in state

javascript

immutability

reactjs

react-redux