如何在 React Reducer 中将深度嵌套的对象添加到深度嵌套的数组中？

Question

我有以下反应状态：

state: {
   objectOne: {
      arrayOne: [
         {
            arrayTwo: [
                {
                   value: 'some value'
                }
            ]         
         }
      ]
   }
}

我正在使用 React useContext 和 useReducer 钩子。 我想要做的是将一个对象添加到arrayTwo。

到目前为止我所做的尝试：

我调用了一个类型为“ADD_NEW_OBJECT”的调度函数，有效负载是一个包含一些键值对的对象。

    dispatchFunction({
       type: 'ADD_NEW_OBJECT', 
       payload: {
          value: {
             a: 'this is the ',
             b: 'object I want to add',
          }
          arrayOneIndex: 0, 
          arrayTwoIndex: 0
       }
    });

这是我的 useReducer case-Statement：

case 'ADD_NEW_OBJECT':
            return {
                ...state,
                objectOne: {
                    ...state.objectOne,
                    arrayOne: [
                        ...state.objectOne.arrayOne,
                        {
                            ...state.objectOne.arrayOne[payload.arrayOneIndex],
                            arrayTwo: [
                                ...state.objectOne.arrayOne[payload.arrayOneIndex].arrayTwo,
                                payload.value
                            ]
                        },
                    ]
                }
            }

Answer 1

Immer 是一个用于简化此代码的出色库。它会生成传递给它的对象的深层克隆，然后您可以对克隆进行变异。

import produce from "immer";

const reducer = produce((draft, action) => {
  switch (action.type) {
    case ADD_NEW_OBJECT:
      draft.objectOne.arrayOne[action.payload.arrayOneIndex][
        action.payload.arrayTwoIndex
      ].push(value);
      return draft;
  }
});