Как сбросить редуктор, который использует тот же ключ, но другое действие?

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