reactjs - 将持久上下文反应到本地存储

Question

我希望能够将上下文持久保存到本地存储。

我的路由器看起来像

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='/'>
                  <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更改时保存到本地存储吗？

标签： reactjstypescript