Как лучше всего сохранить контекст в локальном хранилище

Я хочу иметь возможность сохранять контекст в локальном хранилище.

Мой роутер выглядит так:

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 изменения?

0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *