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

Posted 2023-04-14

【中文标题】在组件之间路由时如何保持 React 新的 Context API 状态？

【英文标题】：How to keep React new Context API state when routing between Components?

【发布时间】：2018-11-19 16:13:14

【问题描述】：

总结：

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

详细说明：

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

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

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

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

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

如果没有更好的解决方案：

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

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

提前非常感谢！

【参考方案1】：

抱歉，回复晚了

你在使用 React 路由器吗？

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

这是一个例子：

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 页面，您仍然可以在该页面中访问未清除任何内容的上下文阶段。

【讨论】：

在使用target="_blank" 属性和Link 标签时，有什么方法可以使用持久化状态。我可以在没有target 属性的情况下使用持久状态，但是在添加属性时它会显示为空白。我也需要该属性，因为我需要在新选项卡中打开以下页面。

@Arpit 如果您在新标签中打开，那么它将始终清除状态。你想要的是坚持状态。最好的方法是将其保存在本地存储中，然后从中读取，并将从本地存储中读取的任何内容用作当前状态。

【参考方案2】：

所以我想出了一种解决 Context 问题的方法（第一个问题）：我将 Provider 组件的状态存储在一个变量中。这样，当该组件再次挂载时，它会使用“持久”状态作为其状态的初始值。

let persistedState = ;
const Context = React.createContext();

export class Provider extends React.PureComponent 

  state =  ...persistedState ;

  updateState = (nextState) => this.setState(nextState, () => 
    persistedState = ...this.state;
  );

  render() 
    return (
      <Context.Provider value=this.state>
        this.props.children
      </Context.Provider>
    );