Question

我看过3种形式的减速器：

// Form 1
function reducer(state, action) {
  if (state === undefined)
    return state = [];

  // handle action.type
  // ...
}

// Form 2
function reducer(state, action) {
  if (state === undefined)
    state = [];

  // handle action.type
  // ...
}

// Form 3
function reducer(state = [], action) {

  // handle action.type
  // ...
}

它们都一样吗？表格1和表格2的不同之处在于，表格1立即返回了初始状态，而根本没有查看和照顾action.type。

我认为使用默认参数值，表格2和表格3完全相同。

任何声明都可以由任何官方文档或规范证实吗？它认为这意味着，在第一次调用reducer时，action.type不会有任何意义。

Answer 1

在Redux reducer中，如果未定义状态，您可以立即返回初始状态吗？

是的，我们可以。

但是，您不需要检查未定义或任何其他非空检查。

switch default语句将非常顺利地处理它。

function reducer(state, action) {

  switch(action.type){
      //rest case
      default:
      return state;
  }
}

// Form 2
function reducer(state, action) {

    switch(action.type){
        //rest case
      default:
      return state;
    }
}

Answer 2

您可以简单地使用：redux-starter-kit

中的 createReducer

此demo中也使用了Microsoft

一个实用程序功能，允许将化简器定义为从操作类型到处理这些操作类型的大小写化简函数的映射。减速器的初始状态作为第一个参数传递。

每个case reducer的主体都隐含了来自immer库的对produce（）的调用。这意味着除了返回新的状态对象外，您还可以直接更改传入的状态对象。这些变异将自动有效地翻译成副本，为您带来便利和不变性。

@param initialState-减速器返回的初始状态。
@param actionsMap —从动作类型到特定于动作类型的案例重新分配器的映射。

用法

export const LocalStorageReducer = createReducer<Store['localStorage']>(
  new LocalStorage(), // <= where you define the init value of this state
  {
    storeLocalStorageInput(state, action) {
      return state = {...state, [action.payload.item]: action.payload.value};
    },
    clearLocalStorageInput(state, action) {
      return state = new LocalStorage();
    },
  }
);

export const reducer = combineReducers({
  localStorage: LocalStorageReducer,
...

createReducer类型

(alias) createReducer<LocalStorage, CaseReducers<LocalStorage, any>>(initialState: LocalStorage, actionsMap: CaseReducers<LocalStorage, any>): Reducer<LocalStorage, AnyAction>
import createReducer

状态样本

export class LocalStorage {
  /**
   * Editing plan id in planner pages
   */
  planId: string | undefined;
  /***
   * Touched id list
   */
  touchedIdList: Array<string>;
  constructor() {
    this.planId = undefined;
    this.touchedIdList = Array<string>();
  }
}

已经有开发的方法可以通过libs完成这些操作，在大多数情况下无需手动再次执行操作。

Answer 3

Redux初始化它调度一个“虚拟”动作来填充状态。请检查此docs
在任何情况下都不允许归约器返回undefined，如有必要，它可以返回null

从技术上讲，这三个都是相同的，因为第一次使用伪指令调用reducer时，Form 1的状态不再是未定义的。在随后的调用中，将从应用程序代码中以有意义的动作对其进行调用，并且在那时作为state = []进行检查action.type

在Redux reducer中，如果未定义状态，是否可以立即返回初始状态？

3 个答案: