Как добавить глубоко вложенный объект в глубоко вложенный массив в 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 '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;
  }
});