Question

要点：

1）您是否知道在通过路由挂载/卸载时如何保持Context Provider的状态？ 2）或者您是否知道维护良好的Flux实现支持多个独立存储？

详细说明：

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

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

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

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

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

如果不是更好的解决方案：

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

我会对一些反馈感到非常高兴，希望你能指出一个比动态减速器Redux或暂时保持Context状态更令人满意的方向。

提前多多感谢！

Answer 1

所以我找到了一种解决Context问题的方法（第一个问题）：我将Provider组件的状态存储在一个变量中。这样，当再次安装该组件时，它会使用＆＃34; persisted＆＃34;将州作为其州的初始值。

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>
    );
  }
}

Answer 2

对不起，答案太晚了

您在使用React Router吗？

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

这里是一个例子：

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>
}

在主家庭组件上，必须使用Link或Navlink在组件之间“切换”。因此，您将得到类似...

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

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

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

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

2 个答案: