Question

这是我目前的减速器：

import { Reducer } from 'redux';
import {
  EventState,
  LOAD_EVENTS,
  LOAD_EVENT_BY_ID,
  FETCH_MORE_EVENTS
} from '../types/eventTypes';

export const initialState = {
  eventsList: [],
  event: undefined,
  isLastPage: false
};

const eventReducers: Reducer<EventState, any> = (
  state = initialState,
  action
) => {
  switch (action.type) {
    case LOAD_EVENTS:
      return {
        ...state,
        eventsList: action.eventsList
      };
    case FETCH_MORE_EVENTS:
      return {
        state,
        eventsList: state.eventsList.concat(action.eventsList),
        isLastPage: action.eventsList.length === 0
      };
    default:
      return state;
  }
};

export default eventReducers;

如您所见，案例LOAD_EVENTS和FETCH_MORE_EVENTS都共享密钥eventsList，在获取更多事件时，我将这样的状态称为state而不是...state因为它似乎重新初始化了整个减速器的状态。但是，这是正确的方法吗？我认为如果减速器长大，那将是一个错误。

那我该怎么做才能正确清洁该减速器呢？就像我所需要的一样，LOAD_EVENTS触发后，eventsList应该变得清晰，并根据LOAD_EVENTS带来的内容再次填写。基本上，我只需要重置eventsList的状态，但其余部分应保持不变。

Answer 1

当您调用state之类的状态而不是...state时，您无需重新初始化状态，而是将先前的状态存储在新状态中，如下例所示：

state = {
  eventsList: [...someEvents],
  event: undefined,
  isLastPage: false,
  state: {
    eventsList: [...someEvents],
    event: undefined,
    isLastPage: false,
    state: {
      eventsList: [...someEvents],
      event: undefined,
      isLastPage: false
    }
  }
};

这不是一个好的模式/做法，只有在非常必要的情况下。

所以正确，当获取更多事件时，它将使用initialState重置先前的状态。

export const initialState = {
  eventsList: [],
  event: undefined,
  isLastPage: false
};

const eventReducers: Reducer<EventState, any> = (
  state = initialState,
  action
) => {
  switch (action.type) {
    case LOAD_EVENTS:
      return {
        ...state,
        eventsList: action.eventsList
      };
    case FETCH_MORE_EVENTS:
      return {
        ...initialState,
        eventsList: state.eventsList.concat(action.eventsList),
        isLastPage: action.eventsList.length === 0
      };
    default:
      return state;
  }
};

但是怎么说，只需要重置eventsList的状态，但是其余部分应该保持不变，您可以对该减速器保持不变：

case LOAD_EVENTS:
  return {
    ...state,
    eventsList: action.eventsList
};

因为像上述示例那样设置eventsList时，将重置eventsList并再次填写新数据。但是请不要忘记我说的第一个示例的问题。

如何重置使用相同键但动作不同的Reducer？

1 个答案: