Question

我正在使用react-redux（第一次）。我有一个组件，用户可以在其中放置一个“ startDate”和一个“ endDate”。然后应将它们存储在redux存储中，以便它们持久存在。

我有以下动作创建者：

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 dev-tools的问题，当触发提交时，存储确实会更改为新日期，但随后似乎会立即覆盖为空状态。通过修改化简器以将state = {dates: 'foo'}作为其第一个参数，我可以使存储持久化“ dates：foo”。这告诉我，由于某种原因，reducer被调用了两次-一次使用类型为“ SET_DATES”的动作，该动作起作用，然后再次立即使用未知类型的动作（由console.log-ging确认） action.type），使其返回默认状态。

所以我很确定我知道问题出在哪里，但是我不知道为什么会这么做。

Answer 1

我已经发表了评论，但无论如何。问题是您重新加载页面。它会重新加载redux，并从初始状态（可能是空数组）启动。这是来自redux的大脑之一的精彩视频。

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

归根结底，是要订阅存储状态更改，然后进行保存/从存储库中加载状态。

Answer 2

尝试像这样更换减速器

"hasRole = ADMIN.

React-redux-状态会自行覆盖

2 个答案: