React + Redux + Router - 我应该为所有页面/组件使用一个状态/存储吗？

Posted 2023-02-19

【中文标题】React + Redux + Router - 我应该为所有页面/组件使用一个状态/存储吗？

【英文标题】：React + Redux + Router - should I use one state/store for all pages/components?

【发布时间】：2016-09-02 23:25:05

【问题描述】：

我正在使用 React + Redux，在阅读了 react-router-redux 和 redux-router 以及 Dan Abramov's answer 之后，我决定使用“vanilla”react-router（我不关心时间旅行等。在此刻）。

剩下的唯一悬而未决的问题是如何处理跨不同路由的状态。在我的应用程序中，每个路由子树都可以是不同且独立的部分（尤其是当它变大时）。让一个商店处理所有路线/页面仍然是一种好习惯吗？我（至少）不应该为每个主要路径路径设置不同的存储/状态吗？

我认为路由应该是某种无状态和独立的，这意味着如果我直接转到我的一个链接，它应该可以工作，并且不会知道其他同级路由。我应该把它反映到我的商店吗？

编辑

经过一番思考，我猜想使用不同的减速器+“CombineReducers”就可以了。唯一需要我验证的是，以前的路线状态在导航时不会持续存在

【参考方案1】：

关于验证以前路由的状态不会持续存在的可能解决方案：

当用户在页面之间导航时，每个路由中的***组件都在安装和卸载。你可以使用他们的生命周期方法来发送任何 redux 事件来清理你的状态。

例如从componentWillUnmount 发送CLEAN_STATE。您应该在*** reducer 中捕获此事件，并从中返回初始状态。为此，您可以使用 undefined 作为状态参数手动调用所有嵌套的减速器。在这种情况下，每个 reducer 都会返回它的初始状态。

【讨论】：

好的。这不是一种hackie解决方案吗？我想知道是否有更清洁的解决方案......

您好，只是另一个提示。看看 webpack 中的代码拆分。一个很棒的工具包，你描述的是redux starter kit。可能也值得研究一下，只是为了了解一种可能的方法

@Deep 谢谢，听说了，去看看！

@YanivEfraim 我也不喜欢这个解决方案，但它似乎是相当“官方”的方式。你也可以在你的 reducer 中捕获 redux-router 引发的 "@@reduxReactRouter/routerDidChange" 事件，但如果你使用异步加载组件，可能会出现（或没有）一些问题。我不确定，还没试过。