Ngrx Store 在浏览器刷新后重置。如何让应用保持状态？

Question

我从一个组件调度一个动作

this.store.dispatch({type : STORE_TEAMCREST , payload : team.crestURI});

并且在另一个组件 i select 来自商店使用

this.store.select(state => state.table.teamCrest).subscribe(data => this.teamCrest = data);

如果我的应用程序按顺序向后或向前移动，这会很好地工作，但是一旦我刷新浏览器，状态就会失去它的价值。如何保留它的价值以便它在浏览器刷新时起作用？

Answer 1

您的商店有一个 subscribe 函数，它会在任何时候调度一个动作时被调用，并且状态树的某些部分可能已经改变。对于一个简单的解决方案，您可以在此处将状态保存到本地存储：

this.store.subscribe(function() {
    localStorage.setItem('state', JSON.stringify(this.store.getState()));
})

Documentation here

请注意，您需要将状态字符串化以将其存储在本地存储中

要使用此状态，您需要将本地存储状态 localStorage.getItem('state')（如果存在）作为您的减速器中的默认状态。为了实现这一点，我通常有一个辅助函数检查本地存储中是否存在键为 'state' 的项目，如果存在则调用 JSON.parse 值。

默认减速器案例：

default:
        if (retrieveState()) {
            var newState = JSON.parse(retrieveState())          
            return newState
        }
        else {
            return {...whatever your default state is};
        }

同样在快速浏览之后，似乎确实存在一个中间件可以实现你想要的：https://github.com/btroncone/ngrx-store-localstorage

Ngrx Store 在浏览器刷新后重置。如何让应用保持状态？

Ngrx Store Resets after browser refresh. How to make the application preserve the state?

redux

ngrx

angular

ngrx-store