尝试实现redux-persist持久化指定Reducer后，所有Reducer丢失

我之前也踩过这个坑！你遇到的所有Reducer丢失的问题，大概率是在redux-persist的配置环节出了问题，特别是没有正确合并所有Reducer或者persist相关API使用错误导致的。结合你的描述，我来拆解常见问题和正确的配置方式：

常见错误原因 #

1. 错误使用persistCombineReducers替代普通combineReducers
   很多人误以为persistCombineReducers会自动处理所有Reducer，但实际上它只针对你配置的持久化Reducer生效，非持久化的Reducer如果没手动合并，就会被排除在store之外，最终导致所有Reducer“丢失”（其实是没被正确加入store）。

2. PersistGate导入路径错误
   你的代码里写的是redux-persist/es/in...，正确的导入路径应该是redux-persist/integration/react，路径错误会导致持久化逻辑不生效，甚至引发store异常。

3. 白名单配置或字段过滤错误
   如果whitelist里的Reducer名称和实际合并的key不匹配，或者createWhitelistFilter的参数写错，会导致持久化失效，同时如果其他Reducer没被正确加入，就会出现全量丢失的情况。

正确的配置示例 #

假设你的Reducer分别是invoices、version（需要持久化）和其他非持久化Reducer，以下是完整的正确配置：

1. 导入必要模块 #

import React, { Component } from "react";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose, combineReducers } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage"; // 默认使用localStorage
import { createWhitelistFilter } from "redux-persist-transform-filter";
import { PersistGate } from 'redux-persist/integration/react'; // 注意这里的正确路径

// 导入你的所有Reducer
import invoicesReducer from './reducers/invoices';
import versionReducer from './reducers/version';
import userReducer from './reducers/user'; // 非持久化示例
import settingsReducer from './reducers/settings'; // 非持久化示例

2. 配置字段过滤（可选，若需持久化Reducer的部分字段） #

如果你不需要过滤字段，直接跳过这一步，只在persistConfig的whitelist里指定Reducer即可：

// 为invoicesReducer指定要持久化的字段（比如只存list和selectedId）
const invoicesFilter = createWhitelistFilter('invoices', ['list', 'selectedId']);
// 为versionReducer指定要持久化的字段（比如只存current版本号）
const versionFilter = createWhitelistFilter('version', ['current']);

3. 配置persistConfig #

const persistConfig = {
  key: 'root', // 持久化的根key
  storage, // 存储引擎（这里用localStorage）
  whitelist: ['invoices', 'version'], // 仅持久化这两个Reducer
  transforms: [invoicesFilter, versionFilter] // 可选，添加字段过滤规则
};

4. 合并所有Reducer并创建持久化Reducer #

关键：必须先合并所有Reducer（包括非持久化的），再用persistReducer包装：

// 合并所有Reducer，不管是否需要持久化
const rootReducer = combineReducers({
  invoices: invoicesReducer,
  version: versionReducer,
  user: userReducer,
  settings: settingsReducer
});

// 用persistReducer包装rootReducer，仅持久化whitelist中的部分
const persistedReducer = persistReducer(persistConfig, rootReducer);

5. 创建Store和Persistor #

// 兼容Redux DevTools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

// 创建store，传入持久化后的reducer
const store = createStore(
  persistedReducer,
  composeEnhancers(applyMiddleware(/* 你的中间件，比如redux-thunk、redux-saga等 */))
);

// 创建persistor对象
const persistor = persistStore(store);

6. 用Provider和PersistGate包裹应用 #

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        {/* PersistGate会在持久化数据加载完成后再渲染应用 */}
        <PersistGate loading={<div>加载中...</div>} persistor={persistor}>
          {/* 你的应用根组件 */}
        </PersistGate>
      </Provider>
    );
  }
}

export default App;

排查步骤 #

1. 检查是否合并了所有Reducer：确保所有需要的Reducer都在combineReducers里，不要只传入要持久化的Reducer。
2. 核对whitelist中的Reducer名称：必须和combineReducers里的key完全一致。
3. 确认PersistGate的导入路径：必须是redux-persist/integration/react，路径错误会导致持久化逻辑失效。
4. 若使用了字段过滤，检查createWhitelistFilter的第一个参数是否是Reducer的key，第二个参数是否是该Reducer下的有效字段。

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