在redux reducer中修改数组中特定项目的状态

Question

我无法完全理解redux 的样板。我查找了immutable modifying of state 的常见模式，但问题是，所有这些模式都只是推到最后，而不是针对特定索引。

在我进入实际代码之前，为了更好地想象，这是状态结构的样子（伪代码）：

state = {
   quizMenu: {...},
   quizEditor: Array<Question>,

    > type Question = {
        id: number,
        question: string,
        questionOptions: Array<QuestionOption>,
      }

        > type QuestionOption = {
           id: number,
           optionText: string,
           isValid: boolean,
          }
}

希望这是有道理的。我创建了一个添加问题的操作，效果很好。现在，我尝试创建一个操作以向现有问题添加选项，但我不知道如何在嵌套的对象数组中添加选项。

以下是我的相关操作的定义方式：

const AQO = 'ADD_QUESTION_OPTION';

/*
 * @param questionId - ID of the question we're accesssing in quizEditor array
 * @param id - id of the option we're adding (handled in component)
*/
const actionAddQuestionOption = createAction(
  AQO, 
  (questionId: number, id: number) => ({ 
    payload: {
      id,
      optionText: 'New option',
      isValid: false,
      questionId,
    },
  })
);

现在我的reducer是这样的：

const reducer = createReducer({//...}, {
   [actionAddQuestionOption.type]: (state, action) => ({
     ...state,
     quizEditor: [...state.quizEditor][action.payload.questionId].questionOptions.push({
        id: action.payload.id,
        optionText: action.payload.optionText,
        isValid: action.payload.isValid,
     })
   })
}

这只是以这个怪物类型错误结束：https://pastebin.com/raw/pBbnxcQp

但我很确定我错误地访问了对象数组中的数组。

quizEditor: [...state.quizEditor][action.payload.questionId].questionOptions

有谁知道访问它的正确方法是什么？非常感谢！

Answer 1

由于您使用的是redux-toolkit，它内置了immer，您可以直接改变状态，它会在内部将其转换为不可变的更新

const reducer = createReducer({
  [actionAddQuestionOption.type]: (state, { payload: { questionId, ...option }}) => {
    const question = state.questionquizEditor(question => question.id === questionId)
    question.questionOptions.push(option)
  }
})

使其成为不可变更新的方法是这样的

const reducer = createReducer({
  [actionAddQuestionOption.type]: (state, { payload: { questionId, ...option } }) => ({
    ...state,
    quizEditor: state.quizEditor.map(question =>
      (question.id === questionId
        ? {
          ...question,
          questionOptions: [...question.questionOptions, option],
        }
        : question)),
  }),
})

Answer 2

Array 的 push 方法返回数组的新长度，而不是数组本身。您可以做的只是concat 数组的新对象，这反过来将返回带有新问题选项的新数组。

[...state.quizEditor][action.payload.questionId].questionOptions.concat({
        id: action.payload.id,
        optionText: action.payload.optionText,
        isValid: action.payload.isValid,
     })

此外，我们只需要使用新数组修改 state 中的那个属性：

const reducer = createReducer({
  //...}, {
  [actionAddQuestionOption.type]: (state, action) => {
    const quizEditor = [...state.quizEditor];
    quizEditor[action.payload.questionId].questionOptions = quizEditor[
      action.payload.questionId
    ].questionOptions.concat({
      id: action.payload.id,
      optionText: action.payload.optionText,
      isValid: action.payload.isValid
    });

    return {
      ...state,
      quizEditor
    };
  }
});

感谢 immer in redux 工具包，我们可以使它更具可读性：

const reducer = createReducer({
  //...}, {
  [actionAddQuestionOption.type]: (state, action) => {
    const question = state.quizEditor[action.payload.questionId];
    question.questionOptions = [
      ...question.questionOptions,
      {
        id: action.payload.id,
        optionText: action.payload.optionText,
        isValid: action.payload.isValid
      }
    ];

    return state;
  }
});