时间戳

首页 > 解决方案 > 在组件之间路由时如何保持 React 新的 Context API 状态？

reactjs - 在组件之间路由时如何保持 React 新的 Context API 状态？

问题描述

概括：

1）您知道如何在通过路由安装/卸载上下文提供程序时保持其状态吗？2) 或者您知道支持多个独立存储的维护良好的 Flux 实现吗？

详细地：

除了 React 组件自己的状态之外，到目前为止，我主要使用的是 redux。除了不喜欢让每个状态都在全球范围内管理的想法之外，即使它可能只与子树相关，它也成为我的新项目的一个问题。

我们希望动态加载组件并通过路由将它们添加到应用程序。为了能够让组件准备好即插即用，我们希望它们处理自己的状态（存储它，从服务器请求它，提供修改它的策略）。

我读到了如何使用 redux 动态地将 reducer 添加到全局存储中，但实际上我发现 Reacts Context API 的方法要好得多，我可以将一些状态封装在 Provider 中，并可以在我需要的任何地方使用它。

我唯一的问题是，Provider 和 Consumer 是 React 组件，所以如果它们是组件的一部分，通过路由安装和卸载，那么可能已经创建或获取一次的状态就消失了。

在我看来，除了暂时将状态存储在本地存储或服务器上之外，没有办法解决这个问题。有的话请告诉我！！！

如果不应该有更好的解决方案：

我还考虑了一个更原始的 Flux 实现，它允许多个存储，可以用相关的组件子树封装。但是除了 Redux 之外，我还没有真正找到任何维护良好的 Flux 实现。Mobx 是个例外，但我真的更喜欢 Redux 的 reducer 解决方案，而不是 Mobx 的 observable 解决方案。再说一次，如果您知道维护良好的多商店 Flux 实现，请告诉我！！！

对于一些反馈，我真的很高兴，并希望你能指出一个比动态 reducer Redux 或临时持久化的 Context 状态更令人满意的方向。

提前非常感谢！

标签： reactjsreact-routerreact-context

解决方案

对不起，这是一个很晚的答案

你在使用反应路由器吗？

该状态应该保持不变，并且如果您正确导航，它不应该被清除。不应该重新加载页面，因为这会导致状态清除。

这是一个例子：

import { Router as RootRouter } from 'react-router-dom';
import Router from './routes/Router';

const App = () => {
    return (
        <MyContext value={useReducer(myReducer, initialState)}>
            <RootRouter history={browserHistory}>
                <Router />
            </RootRouter>
        </AuthContext>
    );
}

import About from '../components/About';

const Router = () => {
    return (
        <Switch>
            <Route exact path='/about' component={About}></Route>
        </Switch>
}

在您的主要 home 组件上，您必须使用 Link 或 Navlink 在组件之间“切换”。因此，您将拥有类似...

import { Link } from 'react-router-dom';

<Link to="/about">About</Link>

这会将您导航到 about 页面，您仍然可以在其中访问未清除任何内容的上下文阶段。

推荐阅读