redux 是如何保存状态数据的？
我们使用了 redux 后，多个页面的状态可以方便的集中管理，还被动实现了状态的跨组件和跨页面共享。
redux 是怎么做到的呢？答案是内存，redux 将状态数据保存在了内存里。
因为是保存在内存里，所以当我们刷新页面时，这些状态数据就没了，需要重新去获取。
通过网络请求重新获取状态数据，会有时延的问题，体验不好还浪费服务器资源。
怎么办？
我们可以把状态数据保存在本地（LS,SS 等），只在需要刷新数据的时候才去使用网络请求。
redux-persist 就是这样的一个库，它是一个状态数据的本地化解决方案。如果项目不大，你自己去操作 localstorage，但是如果涉及的数据比较多，redux-persist 会让你轻松很多。
安装
yarn add redux-persist
使用
import { useEffect } from 'react';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';
import { useLocation } from 'react-router-dom';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
import { PersistGate } from 'redux-persist/integration/react';
import reducer from '@reducers';
const middleware = [thunk];
if (process.env.NODE_ENV !== 'production') {
middleware.push(createLogger());
}
const persistConfig = {
key: 'root',
storage,
};
const persistedReducer = persistReducer(persistConfig, reducer);
let store = createStore(persistedReducer, applyMiddleware(...middleware));
let persistor = persistStore(store);
function Layout(props) {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
{props.children}
</PersistGate>
</Provider>
);
}
export default Layout;
上面的代码集成了 redux-logger 和 redux-thunk，以及跨页面的滚动条回到页面顶部。是我在重构 m.yuancheng.work 项目使用的真实业务代码。