Redux Toolkit中直接调用caseReducers时如何触发prepare回调函数？

这个问题我之前也碰到过！直接调用caseReducers里的reducer方法时，Redux不会自动执行对应的prepare函数——因为prepare本来是在你通过dispatch触发action时，由Redux内部流程自动调用的，用来预处理生成完整的action payload。你直接传自定义的payload对象，自然就没走prepare的逻辑，导致newId是undefined。

下面给你两种实用的解决办法：

方法一：手动调用prepare生成完整action #

你可以先调用该reducer对应的prepare方法，生成包含newId的完整action对象，再把这个action传给caseReducers的reducer：

// 第一步：调用prepare生成带newId的action
const action = commentSlice.caseReducers.addComment.prepare({ comment: comment });
// 第二步：把生成的action传给reducer执行
commentSlice.caseReducers.addComment(state, action);

这样prepare就会正常运行，用nanoid()生成ID并添加到payload里，reducer里的newId就不会是undefined了。

方法二：封装辅助函数简化调用 #

如果需要在多个地方调用这个reducer，你可以在slice里封装一个辅助函数，把prepare和reducer的调用逻辑整合起来，避免重复代码：

// 在commentSlice的定义里添加辅助函数
const commentSlice = createSlice({
  name: 'comments',
  initialState: {},
  reducers: {
    addComment: {
      reducer: (state, action) => {
        const { newId, comment } = action.payload;
        console.log(newId);
        // 你的状态更新逻辑
      },
      prepare: (input) => {
        return { payload: { ...input, newId: nanoid() } };
      }
    }
  }
});

// 添加辅助函数
commentSlice.addCommentWithPrepare = (state, comment) => {
  const action = commentSlice.caseReducers.addComment.prepare({ comment });
  commentSlice.caseReducers.addComment(state, action);
};

之后在其他reducer里调用时，直接用这个辅助函数就行：

commentSlice.addCommentWithPrepare(state, comment);

另外补充一点：如果你的场景允许，其实在另一个reducer里通过dispatch(addComment({comment: comment}))来触发action会更符合Redux的常规流程，这样prepare会自动执行，但如果是需要在同一个slice的reducer里直接修改状态（比如批量操作），那上面的两种方法就更合适。

内容的提问来源于stack exchange，提问作者Eric P