我正在为我的SPA使用React和Redux,我想在本地存储一些数据 . 我需要将appState与localstorage同步,因此刷新页面后我的数据不会丢失 .
我对React和Redux来说是全新的,并没有太多了解发生了什么,但是我认为Redux为我创建了整个应用程序的状态,所以我不能将我的状态与app组件中的localstorage绑定,因为它'我只是组件的状态而不是我的应用程序 .
我建议使用以下命令将数据存储在本地存储中 .
在localStorage中设置数据可以使用以下命令完成:
localStorage.setItem('nameForData', variableNameForData);
在需要时检索数据 .
var variableNameForData = localStorage.getItem('nameForData')
要从localStorage中删除数据:
localStorage.removeItem('nameForData')
这些通常会放在动作创建器中,并带有一个调度来更改跟踪应用程序与localStorage交互的一些布尔值的状态 .
例如,在创建本地存储时,您可能具有设置为true的状态 .
在刷新时,您可以调用一个动作创建器来检查本地存储是否存在,如果它确实将该布尔值设置为true,或者如果它不存在,则返回创建本地存储,然后将其设置为true .
您可以将此函数放在 componentWillMount(){} 中,并在首次渲染组件时调用它,因此在刷新的情况下 .
componentWillMount(){}
Docs for component life cycle and specifically componentWillMount here
Docs for local storage here
我可以建议你在每次动作后存储状态 . 为此,您可以使用仅存储整个状态对象的 localStorage middleware .
然后在您的createStore部分中,您将从localStorage API中检索 initialState .
在这种情况下,您不需要修改任何组件,从localStorage和保存状态的中间件中获取initialState
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
我可以建议你在每次动作后存储状态 . 为此,您可以使用仅存储整个状态对象的 localStorage middleware .
然后在您的createStore部分中,您将从localStorage API中检索 initialState .
在这种情况下,您不需要修改任何组件,从localStorage和保存状态的中间件中获取initialState