在每个页面上将状态重置为初始状态答案

【问题标题】：State resetting to initial state on each page在每个页面上将状态重置为初始状态
【发布时间】：2020-02-05 21:10:38
【问题描述】：

我在使用 Redux 时遇到问题，当我更改或重新加载当前页面时，我的商店会重置为初始状态。

在更改或重新加载页面后，我不想在我的网站上添加保持当前数字的计数器。我有一个“+”和一个“-”按钮，效果很好，但是当我重新加载我的页面时，值会重置为 0。

组件/layout.js：

const initialState = {
  count: 0,
}

function reducer(state = initialState, action) {
  console.log("reducer", state, action)
  switch (action.type) {
 //... some actions...
  }
}

const store = createStore(reducer)

export default ({ children }) => (
  <Provider store={store}>
      ...
  </Provider>

预期：重新加载页面后计数器保持该值
实际：重新加载页面后计数器重置为 0

【问题讨论】：

Redux 状态存储在内存中。除非您自己保存和恢复它（服务器端、本地存储等），否则在刷新或页面更改后它将不可用。
Redux 状态不会在页面重新加载时保持不变。如果您希望它保持硬刷新，请查看this question
How can I persist redux state tree on refresh?的可能重复

标签： javascript reactjs redux

【解决方案1】：

这是预期的行为。 Redux 不会持久化应用程序状态，它会在应用程序刷新时重置。但是，您可以做几件事来保持应用状态：

由于您的状态只是一个计数，您可以将其存储在 localStorage 中，并在您的应用启动时（即刷新时）从 localStorage 中获取状态。
您可以使用 redux-persist 来持久化您的应用状态，尽管 redux--persist 在内部也使用 localStorage，但它可以让您更好地控制如何持久化您的状态。

编码愉快！

【讨论】：

感谢您的解释！我会看到这两件事:)

【解决方案2】：

通过重新加载页面，您可以重新初始化您的应用程序并重新初始化其存储。您可以将计数值存储到localStorage，并在页面刷新后使用。

【讨论】：