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

Posted 2023-02-19

【中文标题】Ngrx Store 在浏览器刷新后重置。如何让应用保持状态？

【英文标题】：Ngrx Store Resets after browser refresh. How to make the application preserve the state?

【发布时间】：2018-01-17 03:06:03

【问题描述】：

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

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

在另一个组件中，我使用

从商店中选择

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

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

【问题讨论】：

您必须使用 cookie 或本地存储，因此在初始化时您可以检查以前的状态，并且每次进行更改时都重写您的本地存储或 cookie。

@EduardoVargas 任何其他人都可以实现这一目标

【参考方案1】：

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

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

Documentation here

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

要使用此状态，您需要将本地存储状态 localStorage.getItem('state')（如果存在）作为您的 reducer 中的默认状态。为了实现这一点，我通常有一个辅助函数检查本地存储中是否存在具有键“状态”的项目，如果存在则调用 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

【讨论】：

使用store时如何retive，选择状态是更新还是从本地存储获取？

你继续使用 store.select 同样的方式。您的 store.subscribe 函数只是确保在您终止内存会话时备份内存存储

我在哪里放置这个订阅电话？在 roor 级别或功能级别，因为我有延迟加载的模块 2

我已经接受了答案，但我觉得我的 ngrx 组件剃须延迟加载它无法正常工作，因为从延迟加载的组件刷新时它只会触发父操作

@NickHodges 您应该将其更多地视为内存缓存。持久性将是一个加号，但可惜。幸运的是这个中间件存在