Question

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

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

components / 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

Answer 1

这是预期的行为。 Redux不会保持应用程序状态，而是在刷新应用程序时重置。但是，您可以执行以下几项操作来保持应用状态：

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

编码愉快！

Answer 2

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

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

2 个答案: