我从一个组件发送一个 Action
this.store.dispatch({type : STORE_TEAMCREST , payload : team.crestURI});
在另一个组件中,我使用
从商店中选择this.store.select(state => state.table.teamCrest).subscribe(data => this.teamCrest = data);
如果我的应用程序按顺序向后或向前移动,这会很好地工作,但是一旦我刷新浏览器,状态就会失去它的值(value)。如何保留它的值(value)以便它在浏览器刷新时起作用?
最佳答案
您的商店有一个 subscribe
函数,它会在任何时候调度一个 Action 时被调用,并且状态树的某些部分可能已经改变。对于一个简单的解决方案,您可以在此处将状态保存到本地存储:
this.store.subscribe(function() {
localStorage.setItem('state', JSON.stringify(this.store.getState()));
})
请注意,您需要将状态字符串化以将其存储在本地存储中
要使用此状态,您需要将本地存储状态 localStorage.getItem('state')
(如果存在)作为您的 reducer 中的默认状态。为实现这一点,我通常有一个辅助函数来检查本地存储中是否存在具有键“state”的项目,如果存在则调用 JSON.parse 值。
默认 reducer 案例:
default:
if (retrieveState()) {
var newState = JSON.parse(retrieveState())
return newState
}
else {
return {...whatever your default state is};
}
同样在快速浏览之后,似乎确实存在一个中间件可以实现您想要的:https://github.com/btroncone/ngrx-store-localstorage
关于angular - Ngrx Store 在浏览器刷新后重置。如何让应用保持状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45587050/