使用react-redux的LocalStorage

Question

我在我的SPA上使用React和Redux，我想在本地存储一些数据。我需要将appState与localstorage同步，因此刷新页面后我的数据不会丢失。

我对React和Redux来说是全新的，并且不太了解发生了什么，但是我认为Redux为我创建了整个应用程序的状态，所以我不能将我的状态与app组件中的localstorage绑定，因为它只是组件的状态，而不是我的应用程序。

Answer 1

我可以建议你在每次动作后存储状态。为此，您可以使用仅存储整个州对象的 localStorage中间件。

然后在您的createStore部分中，您将从localStorage API中检索 initialState 。

在这种情况下，您不需要修改任何组件，从localStorage和保存状态的中间件中获取initialState

Answer 2

我建议使用以下命令将数据存储在本地存储中。

可以使用以下命令设置localStorage中的数据：

localStorage.setItem('nameForData', variableNameForData);

在需要时检索数据。

var variableNameForData = localStorage.getItem('nameForData')

从localStorage中删除数据：

localStorage.removeItem('nameForData')

这些通常会放在具有调度的动作创建器中，以更改跟踪应用程序与localStorage交互的某个布尔值的状态。

例如，在创建本地存储时，您可能具有设置为true的状态。

在刷新时，您可以调用检查本地存储的操作创建者，如果它确实将该布尔值设置为true，或者如果它不存在，则返回创建本地存储，然后将其设置为true。

您可以将此函数放在componentWillMount(){}中，并在首次渲染组件时调用它，因此在刷新时也会调用。

Docs for component life cycle and specifically componentWillMount here

Docs for local storage here