Как сохранить состояние React New Context API при маршрутизации между компонентами?
Резюме:
1) Знаете ли вы, как сохранить состояние провайдера контекста, когда он монтируется / размонтируется с помощью маршрутизации? 2) Или вы знаете хорошо поддерживаемую реализацию Flux, которая поддерживает несколько отдельных хранилищ?
В деталях:
Помимо собственного состояния компонентов React, я до сих пор использовал в основном redux. Помимо того, что мне не нравится идея глобального управления каждым состоянием, даже если это может быть актуально только для поддерева, это также становится проблемой для моего нового проекта.
Мы хотим динамически загружать компоненты и добавлять их через маршрутизацию в приложение. Чтобы иметь возможность иметь компоненты, готовые к подключению и воспроизведению, мы хотим, чтобы они заботились о своем собственном состоянии (сохраняли его, запрашивали его с сервера, предоставляли стратегию для его изменения).
Я читал о том, как динамически добавлять редукторы в глобальное хранилище с помощью redux, но на самом деле я считаю, что подход Reacts Context API намного лучше, когда я могу инкапсулировать какое-то состояние в Provider и использовать его там, где мне это нужно.
Единственная проблема, с которой я сталкиваюсь, заключается в том, что Provider и Consumer являются компонентами React, поэтому, если они являются частью компонента, который монтируется и размонтируется посредством маршрутизации, состояние, которое могло быть создано или получено однажды, исчезнет.
Мне кажется, что нет никакого способа решить это, кроме временного сохранения состояния в локальном хранилище или на сервере. Если есть, дайте мне знать !!!
Если лучшего решения не найти:
Я также подумал о более оригинальной реализации Flux, которая допускала бы несколько хранилищ, которые можно было бы инкапсулировать с помощью соответствующего поддерева компонентов. Но на самом деле я не нашел никакой хорошо поддерживаемой реализации Flux, кроме Redux. Mobx является исключением, но я действительно предпочитаю редукторное решение Redux наблюдаемому решению Mobx. Итак, опять же, если вы знаете, что реализация Flux с несколькими хранилищами поддерживается в хорошем состоянии, пожалуйста, дайте мне знать !!!
Я был бы очень рад некоторым отзывам и надеюсь, что вы укажете мне направление, которое более удовлетворительно, чем динамический редюсер Redux или временно сохраняющееся состояние контекста.
Заранее большое спасибо!
Ответы 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>
);
}
}
Извините, что это довольно поздний ответ
Вы используете 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, на которой вы все еще можете получить доступ к стадии контекста, где ничего не очищается.
@Arpit Если вы открываете новую вкладку, она всегда будет очищать состояние. Вы хотите, чтобы состояние сохранялось. Лучший способ сделать это - сохранить его в локальном хранилище, а затем прочитать из него и использовать все, что вы читаете из локального хранилища, в качестве текущего состояния.
Есть ли способ использовать постоянное состояние при использовании атрибута
target = "_blank"с тегомLink. Я могу использовать постоянное состояние без атрибутаtarget, но при добавлении атрибута оно отображается как пустое. Мне тоже нужен атрибут, так как мне нужно открыть следующую страницу в новой вкладке.