Как сохранить состояние React new Context API при маршрутизации между Компонентами?

Question

Сводка:

1) Знаете ли вы, как сохранить состояние поставщика контекста, когда он подключен / отключен при маршрутизации?2) Или вы знаете хорошо поддерживаемую реализацию Flux, которая поддерживает несколько отдельных хранилищ?

Подробно:

Помимо собственного состояния компонентов React, я до сих пор использовал в основном избыточность.Помимо того, что мне не нравится идея глобального управления каждым состоянием, хотя это может иметь отношение только к поддереву, оно также становится проблемой для моего нового проекта.

Мы хотим динамически загружать компоненты и добавлять их через маршрутизациюв приложение.Чтобы компоненты были готовы к работе по принципу «подключи и работай», мы хотим, чтобы они позаботились о своем собственном состоянии (сохраните его, запросите его у сервера, предложите стратегию его изменения).

Я читал о том, какчтобы динамически добавлять редукторы в глобальное хранилище с помощью redux, но я на самом деле считаю, что подход Reacts Context API гораздо приятнее, когда я могу инкапсулировать некоторое состояние в провайдере и использовать его везде, где мне это нужно.

Единственная проблемаЯ имею в виду, что Поставщик и Потребитель являются компонентами React, поэтому, если они являются частью компонента, который монтируется и демонтируется посредством маршрутизации, состояние, которое могло быть создано или извлечено один раз, исчезло.

Мне кажется, что нет способа решить это, кроме временного сохранения состояния в локальном хранилище или на сервере.Если есть, пожалуйста, дайте мне знать !!!

Если не должно быть лучшего решения:

Я также подумал о более оригинальной реализации Flux, которая позволила бы создать несколько магазинов, которые могли быбыть инкапсулированным с соответствующим поддеревом компонента.Но я не нашел ни одной хорошо поддерживаемой реализации Flux, кроме Redux.Mobx - исключение, но я действительно предпочитаю редукторное решение Redux, а не наблюдаемое решение Mobx.Итак, еще раз, если вам известна многоуровневая реализация Flux, которая хорошо поддерживается, пожалуйста, дайте мне знать !!!

Я был бы очень рад получить обратную связь и надеюсь, что вы можете указать мне направление, которое более удовлетворительночем динамический редуктор Redux или временно сохраненное состояние контекста.

Большое спасибо заранее!

Answer 1

Извините, что ответ довольно поздний

Используете ли вы 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>

Это приведет вас к странице about, на которой вы все еще можете получить доступ к контекстной стадии, где ничего не очищено.

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