В редукторе Redux, если состояние не определено, можете ли вы сразу вернуть начальное состояние?

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 абсолютно одинаковы, с использованием значения параметра по умолчанию.

Может ли какое-либо утверждение быть подтверждено официальными документами или спецификациями? Думаю, это означает, что при первом вызове редуктораaction.type не будет ничего значимого.

Answer 1

В редукторе Redux, если состояние не определено, можете ли вы сразу вернуть начальное состояние?

да мы можем.

Но для этого вам не нужно проверять undefined или любую другую непустую проверку.

Оператор 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 инициализирует, он отправляет "фиктивное" действие для заполнения состояния. Пожалуйста, проверьте эту документацию
• Редукторам не разрешено возвращать undefined ни при каких условиях, при необходимости он может вернуть null.

Технически все три одинаковые, поскольку в первый раз редукторы будут вызываться с фиктивным состоянием, состояние больше не будет неопределенным в Form 1. При последующем вызове он будет вызываться с осмысленным действием из кода вашего приложения и какstate = [] в это время он проверит action.type

Answer 3

Вы можете просто использовать: createReducer из набора redux-starter-kit

Что также использовалось в этой демонстрации от Microsoft

Служебная функция, которая позволяет определить редуктор как отображение типа действия на функции редуктора, которые обрабатывают эти типы действий. Первым аргументом передается начальное состояние редуктора.

Тело каждого редуктора case неявно заключено в оболочку для вызова функции producti () из библиотеки immer. Это означает, что вместо того, чтобы возвращать новый объект состояния, вы также можете напрямую изменить переданный объект состояния; эти мутации будут автоматически и эффективно переведены в копии, что обеспечит вам удобство и неизменность.

@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>();
  }
}

Уже существуют методы, позволяющие делать это с помощью библиотек, и в большинстве случаев нет необходимости делать это вручную.