将对象推入嵌套的 Reducer 数组？

Question

问题：将新的有效载荷对象推送到嵌套的 redux reducers 状态的最佳方法是什么？

我想使用当前状态索引值将新项目位置推送到 reducers 函数中的当前列表数组。

我当前的 REDUX 操作：

export const addLocation = () => {
  return (dispatch) => {
    axios.post("/inventory/lists/addlocation", locationData).then((res) => {
        dispatch({
          type: ADD_POSTED_LOCATION,
          payload: {location: "test", count: 0, _id: "6a5e4f6ae51g6ea5r1ga6e1rf"},
        });
    });
  };
};

我当前的减速器：

const initialState = {
  lists: [],
  currentIndex: {
    listIndex: null,
    itemIndex: null,
    locationIndex: null
  },
};

export default function(state = initialState, action) {
  switch (action.type) {
    case ADD_POSTED_LOCATION:
      const listIndex = state.currentIndex.listIndex;
      const itemIndex = state.currentIndex.listIndex;
      return {
        ...state,
        lists: state.lists[listIndex ].items[itemIndex].locations.push(action.payload)
      };

我现在的结果很简单:

lists: [a number, excluding the list objects and values]

期望的结果：

Lists: [

    {
      _id: "L1",
      items: [{
          number: "n1",
          locations: [{
            location: "L1"
          }, {
            location: "L2"
          }]
        },
        {
          number: "n2",
          locations: [{
              location: "L1"
            }, {
              location: "L2"
            },
            {
              location: "L3"
            },
            {
              location: "L4"
            }, {
              location: "L5"
            }
          ]
        }
      ]

    ]

Answer 1

您应该始终对要更新的状态的任何部分进行浅拷贝，包括嵌套数组和对象。

export default function (state = initialState, action) {
  switch (action.type) {
    case ADD_POSTED_LOCATION:
      const listIndex = state.currentIndex.listIndex;
      const itemIndex = state.currentIndex.listIndex;
      return {
        ...state,
        lists: state.lists.map((list, lIndex) =>
          lIndex === listIndex
            ? {
                ...list,
                items: list.items.map((item, iIndex) =>
                  iIndex === itemIndex
                    ? {
                        ...item,
                        locaitons: [...item.locations, action.payload]
                      }
                    : item
                )
              }
            : list
        )
      };
  }
}

Answer 2

修正了一些简单的错误和语法。这就是解决方案，谢谢德鲁！

我了解到您必须使用扩展运算符 (...) 对嵌套对象结构进行 浅拷贝 。此外，利用可选的 .map() index 参数允许您使用映射数组的索引值与其他索引变量进行比较。很不错！

export default function(state = initialState, action) {
  switch (action.type) {
    case ADD_POSTED_LOCATION:
      return {
        ...state,
        lists: state.lists.map((list, lIndex) =>
          lIndex === state.currentIndex.listIndex ?
          {
            ...list,
            items: list.items.map((item, iIndex) =>
              iIndex === state.currentIndex.itemIndex ?
              {
                ...item,
                locations: [...item.locations, action.payload]
              } :
              item
            )
          } :
          list
        )
      };
  }
}

将对象推入嵌套的 Reducer 数组？

Pushing Object Into Nested Reducer Array?

javascript

action

reducers

reactjs

react-redux