React-redux - состояние перезаписывает себя

Question

Я использую реаги-редукс (впервые).У меня есть компонент, в который пользователи помещают «startDate» и «endDate».Затем они должны быть сохранены в хранилище редуксов, чтобы они сохранялись.

У меня есть следующий создатель действий:

export const setDates = dates => ({
  type: "SET_DATES",
  payload: dates
});

Следующий редуктор:

const dates = (state = {}, action) => {
  switch (action.type) {
    case "SET_DATES":
      return action.payload;
    default:
      return state;
  }
};

export default dates;

Состояние устанавливается условно (т. Е. Только в том случае, если даты начала и окончания действительно имеют смысл) следующим образом:

  handleSubmit = () => {
    if (this.state.startDate <= this.state.endDate) {
      store.dispatch(setDates([this.state.startDate, this.state.endDate]));
      window.location = `/search/${
        this.state.location
      }&${this.state.startDate.format("DDMMYYYY")}&${this.state.endDate.format(
        "DDMMYYYY"
      )}&${this.state.guestCount}&${this.state.offset}&${this.state.count}`;
    } else {
      console.log("HANDLE ERROR");
    }
  };

Проблема, в соответствии с инструментами разработчика Chrome redux, заключается в том, что при запуске отправки происходитмагазин действительно меняется на новые даты, но затем кажется, что он немедленно перезаписывается в пустое состояние.Изменяя редуктор так, чтобы он принимал state = {dates: 'foo'} в качестве первого аргумента, я могу заставить хранилище сохранять «даты: foo».Это наводит меня на мысль, что по какой-то причине редуктор вызывается дважды - один раз с действием типа «SET_DATES», которое работает, а затем снова сразу же с действием неизвестного типа (подтверждено console.log-gingaction.type), который заставляет его возвращать состояние по умолчанию.

Так что я почти уверен, что знаю, в чем проблема, но я понятия не имею, почему он это делает.

Answer 1

Я уже прокомментировал, но все равно.Проблема в том, что вы перезагрузите страницу.Он перезагружает redux и загружается из исходного состояния, которое, вероятно, является пустым массивом.Вот отличное видео от одного из мозгов за редуксом.

https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage

Все сводится к подписке на изменения состояния магазина и его сохранению / загрузке состояния из хранилища по вашему выбору.

Answer 2

Попробуйте заменить редуктор следующим образом

const dates = (state = {}, action) => {
  switch (action.type) {
    case "SET_DATES":
      return Object.assign({}, state, {
        action.payload
      });
    default:
      return state;
  }
};

export default dates;