【问题标题】:React + Redux + Router - should I use one state/store for all pages/components?React + Redux + Router - 我应该为所有页面/组件使用一个状态/存储吗?
【发布时间】:2016-09-02 23:25:05
【问题描述】:

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

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

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

编辑

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

【问题讨论】:

    标签: reactjs react-router redux react-router-redux


    【解决方案1】:

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

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

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

    【讨论】:

    • 好的。这不是一种hackie解决方案吗?我想知道是否有更清洁的解决方案......
    • 您好,只是另一个提示。看看 webpack 中的代码拆分。一个很棒的工具包,你描述的是redux starter kit。可能也值得研究一下,只是为了了解一种可能的方法
    • @Deep 谢谢,听说了,去看看!
    • @YanivEfraim 我也不喜欢这个解决方案,但它似乎是相当“官方”的方式。你也可以在你的 reducer 中捕获 redux-router 引发的 "@@reduxReactRouter/routerDidChange" 事件,但如果你使用异步加载组件,可能会出现(或没有)一些问题。我不确定,还没试过。
    猜你喜欢
    • 2018-02-12
    • 2016-05-21
    • 2018-01-21
    • 1970-01-01
    • 1970-01-01
    • 2016-06-10
    • 2021-04-18
    • 1970-01-01
    • 2017-02-23
    相关资源
    最近更新 更多