REDUX：页面刷新后已存储的数据不丢失是否可以实现？

问题原因 #

Redux的状态默认存储在应用运行的内存中，你额外定义的myCities外部变量也属于内存变量，页面刷新后内存数据会被全部释放，因此数据会丢失。你可以通过浏览器本地存储实现数据持久化，常用方案分为原生实现和第三方库实现两种：

方案1：原生localStorage实现（轻量场景推荐） #

localStorage是浏览器提供的永久存储接口，除非用户主动清除浏览器缓存，数据会一直保留。
首先你当前的代码有不符合Redux规范的问题：不应该在reducer外部定义myCities变量，所有需要管理的状态都应该放到Redux的state中，修改后的实现如下：

import ActionTypes from "../constants/ActionTypes";

// 初始化时从localStorage读取已保存的城市列表
const initMyCities = JSON.parse(localStorage.getItem('myCities') || '[]')
const initialState = {
  aCity: {},
  myCities: initMyCities // 把城市列表放到state中管理
};

export const WeatherReducer = (state = initialState, { type, payload }) => {
  switch (type) {
    case ActionTypes.GETBY_CITYNAME:
      const newCities = [...state.myCities, payload]
      // 更新state的同时同步写入localStorage
      localStorage.setItem('myCities', JSON.stringify(newCities))
      return { ...state, aCity: payload, myCities: newCities };
    default:
      return state;
  }
};

如果你需要删除城市数据，对应在删除的action逻辑中同步调用localStorage.removeItem('myCities')或者更新对应的存储值即可。

方案2：使用redux-persist库（复杂状态场景推荐） #

如果你的Redux状态结构比较复杂，需要持久化的字段多，可以直接使用redux-persist库自动完成状态的读写同步，不需要手动写每个存储逻辑：

1. 首先安装依赖：
   npm install redux-persist
2. 修改store配置文件：

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用localStorage
import WeatherReducer from './reducers/WeatherReducer';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['myCities', 'aCity'] // 配置需要持久化的字段
};

const persistedReducer = persistReducer(persistConfig, WeatherReducer);

export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

3. 修改入口文件的根组件包裹：

import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

配置完成后所有在whitelist中的字段会自动同步到localStorage，刷新页面后会自动恢复状态，不需要修改reducer代码。

内容的提问来源于stack exchange，提问作者Ceren Keklik