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

Posted 2023-02-22

【中文标题】在每个页面上将状态重置为初始状态

【英文标题】：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?的可能重复

【参考方案1】：

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

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

编码愉快！

【讨论】：

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

【参考方案2】：

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