Блог

Я использовал redux toolkit. Что меня смутило в createReducer, так это то, что я не совсем понимаю разницу между .addCase и .addMatcher?

• addCase запустит редуктор, если поле отправленного действия action.type точно соответствует строке, которую вы предоставляете
• addMatcher запустит редуктор, если функция обратного вызова, которую вы предоставляете, возвращает true , и вам решать, как работает соответствующее поведение. Обычно это делается путем проверки того, является ли action.type поле частичным совпадением, например return action.type.endsWith("/pending")

Чтобы добавить больше ясности в популярные объяснения: 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 })
    );
});