使用createReducer与on创建Reducer时，如何处理默认情况？

在createReducer辅助方法出现前，我们会这样编写Reducer：

export function reducer(state: AppState, action: Action) {
 switch (action.type) {
   case "[Category List] Add Category":
         return { ...state, categories: [...state.categories, action.payload] };
   default:
     return baseReducer(state, action);
 }
}

这里的default分支负责处理所有模块通用的其他Action，对应的baseReducer实现如下：

export function baseReducer(state, action){
 //... 处理通用Action的逻辑
}

改用createReducer辅助方法后，代码变成这样：

export const reducer = createReducer(
  initialState,
  on(addCategoryRequest, (state, { payload }) => {
     return { 
      ...state, 
      categories: payload
     };
   // 这里怎么处理default case？
 })
);

处理默认Action的两种方案 #

方案一：包装createReducer生成的Reducer

你可以把createReducer生成的reducer包裹在一个函数里，复刻原来switch的default逻辑：

const categoryReducer = createReducer(
  initialState,
  on(addCategoryRequest, (state, { payload }) => {
     return { 
      ...state, 
      categories: payload
     };
  })
);

export function reducer(state: AppState, action: Action) {
  // 先让createReducer生成的reducer处理匹配的action
  const newState = categoryReducer(state, action);
  // 如果state未发生变化（说明action未匹配），则调用baseReducer
  if (newState === state) {
    return baseReducer(state, action);
  }
  return newState;
}

这种方式和原逻辑完全一致：先处理当前模块的特定Action，未匹配的通用Action交给baseReducer处理。

方案二：将baseReducer的逻辑整合到createReducer中

如果baseReducer的通用逻辑不多，可以直接把这些逻辑拆分成单独的on处理函数，合并到当前的createReducer里：

export const reducer = createReducer(
  initialState,
  // 当前模块的特定Action处理
  on(addCategoryRequest, (state, { payload }) => ({ 
    ...state, 
    categories: payload 
  })),
  // 通用Action处理，对应baseReducer里的逻辑
  on(commonAction1, (state, action) => ({ ...state, /* 具体处理逻辑 */ })),
  on(commonAction2, (state, action) => ({ ...state, /* 具体处理逻辑 */ }))
);

这种方式更贴合createReducer的设计思路，把所有Action处理逻辑集中在一处，避免额外的函数嵌套。

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