在 Redux reducer 中，如果 state 没有定义，你能立即返回初始状态吗?

问题描述

我见过 3 种形式的减速器:

I have seen 3 forms of reducers:

// 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
  // ...
}

他们都一样吗?Form 1 和 Form 2 的不同之处在于 Form 1 立即返回初始状态，根本不需要查看和处理 action.type.

Are they all the same? Form 1 and Form 2 differ by Form 1 immediately returning the initial state without looking at and taking care of action.type at all.

而且我认为Form 2和Form 3完全一样，使用默认参数值.

And I think Form 2 and Form 3 are exactly the same, using default parameter value.

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

Can any claim be substantiated by any official docs or specs? It think it means, the very first time a reducer is called, action.type won't be anything meaningful.

推荐答案

您可以简单地使用:createReducer from redux-starter-kit

You may simply use: createReducer from redux-starter-kit

微软的这个演示中也使用了这一点

Which is also been used in this demo from microsoft

一个实用函数，允许将reducer定义为从操作类型到处理这些操作类型的case reducer函数的映射.reducer 的初始状态作为第一个参数传递.

每个 case reducer 的主体都隐式地包含在 immer 库中对生产()的调用.这意味着除了返回一个新的状态对象之外，你还可以直接改变传入的状态对象；然后，这些突变将被自动有效地翻译成副本，为您提供便利和不变性.

The body of every case reducer is implicitly wrapped with a call to produce() from the immer library. This means that rather than returning a new state object, you can also mutate the passed-in state object directly; these mutations will then be automatically and efficiently translated into copies, giving you both convenience and immutability.

@param initialState — 减速器返回的初始状态.
@param actionsMap — 从动作类型到动作类型特定案例还原器的映射.

@param initialState — The initial state to be returned by the reducer.
@param actionsMap — A mapping from action types to action-type-specific case redeucers.

用法

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来做这些事情，大多数情况下不需要手动再次做.

There are already developed methods to do those things by libs, no need to manually do it again in most situation.

这篇关于在 Redux reducer 中，如果 state 没有定义，你能立即返回初始状态吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！