Я хочу иметь возможность сохранять контекст в локальном хранилище.
Мой роутер выглядит так:
import React, { useState } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Login } from './routes/login';
import { ResetPassword } from './routes/reset-password';
import { ResetEmailSent } from './routes/reset-email-sent';
import { App } from './routes/app';
import { GlobalContext, InitialState } from './globalContext';
import { Layout } from './layout';
function Router() {
const [global, setGlobal] = useState(InitialState);
return (
<GlobalContext.Provider value={{ global, setGlobal }}>
<BrowserRouter>
<Route
render={() => (
<Layout>
<Switch>
<Route exact path="https://codereview.stackexchange.com/">
<Login />
</Route>
<Route exact path="/reset-password">
<ResetPassword />
</Route>
<Route exact path="/reset-email-sent">
<ResetEmailSent />
</Route>
<Route exact path="*">
<App />
</Route>
</Switch>
</Layout>
)}
/>
</BrowserRouter>
</GlobalContext.Provider>
);
}
export default Router;
и globalConext
похоже
import { createContext, useContext } from 'react';
interface StateContextType {
global: any;
setGlobal: (State: any) => void;
}
const savedState = localStorage.getItem('state');
const state = savedState ? JSON.parse(savedState) : {};
const InitialState: any = state;
const GlobalContext = createContext<StateContextType>({
global: InitialState,
setGlobal: () => console.warn('no state provider'),
});
const useGlobal = () => useContext(GlobalContext);
export { InitialState, GlobalContext, useGlobal };
Должен ли я создать useEffect
в маршрутизаторе для сохранения в локальное хранилище всякий раз, когда global
изменения?