reactjs - 持久化 redux 状态与动态 url

Question

在我正在开发的应用程序中，我有一个用户在下拉列表中选择的状态。我希望用户刷新页面后这种状态仍然相同

两种选择：

1. 通过添加“/:state”将状态存储在 url

• 我们必须再次访问 api 端点才能根据状态获取数据。所以它总是新鲜的
• 网址可以存储在历史记录中并复制/添加书签
• 每次用户更改状态时，url都会更改导致页面重新加载

2. 将状态存储在 redux 中并持久化

• 必须安装像 redux-persist 这样需要一些配置的包
• 数据在页面重新加载时仍然存在，因此我们不需要另一个 api 调用
• 数据可能已经过时，需要重新拉取

哪个选项更好？什么情况会破坏这两种选择？

标签： reactjsweburlredux

Answer 1

每次用户更改状态时，url 都会更改导致页面重新加载如果您使用类似的东西react-router，应用程序不会在每次更改 url 时重新加载。

决定在哪里存储一些设置取决于具体情况。我通常更喜欢将与导航相关的内容存储在 url 中：更改视图/页面、打开的模式、搜索/过滤器。通常，当您希望此 url 可与其他用户共享时，您希望将其存储在 url 中。因此，如果您想在 url 中放置一些下拉值，请考虑：您是否希望浏览器导航更改此值？这个下拉菜单会改变一些观点吗？

此外，有时您必须将此选择存储在后端。通常当它是某个实体的属性或设置时。您必须考虑是否希望在不同设备上的多个会话之间共享此下拉列表的值。