.addCase() 和 .addMatcher() 有什么区别

Question

我正在使用 redux 工具包。让我在 CreateReducer 中感到困惑的是我不太理解 .addCase 和 .addMatcher 之间的区别？

Answer 1

• addCaseaction.type如果分派操作的字段与您提供的字符串完全匹配，将运行减速器
• addMatcher如果您提供的回调函数返回，则将运行reducer true，并且由您决定匹配行为如何工作。通常，这是通过查看action.type字段是否部分匹配来完成的，例如return action.type.endsWith("/pending")

Answer 2

为了使流行的解释更加清晰：builder.addCase可以被视为 的简写builder.addMatcher，其中动作与其type属性相匹配。因此，以下两段代码在功能上是等效的：

1.

export default createReducer(initialState, (builder) => {
  builder
    .addCase(actions.openModal, (state, { payload }) => ({ ...state, modalData: payload, isModalOpen: true }))
    .addCase(actions.closeModal, (state) => ({ ...state, isModalOpen: false }));
});

export default createReducer(initialState, (builder) => {
  builder
    .addMatcher(
      ({ type }) => type === actions.openModal.type,
      (state, { payload }) => ({ ...state, modalData: payload, isModalOpen: true })
    )
    .addMatcher(
      ({ type }) => type === actions.closeModal.type,
      (state) => ({ ...state, isModalOpen: false })
    );
});