javascript - 如何重置使用相同 key 但不同操作的 reducer ？

Question

这是我当前的 reducer :

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 共享 key eventsList，在获取更多事件时，我正在调用这样的状态 state 而不是 ...state 因为它似乎重新初始化了整个 reducer 的状态。但是，这是正确的方法吗？我认为如果这个reducer长大了，那将是一个bug。

那么我该怎么做才能正确清洁该 reducer 呢？就像我所需要的那样， 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 的状态即可，其余部分保持不变，您可以对此 reducer 保持相同:

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

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