redux-persist如何分别用localStorage和AsyncStorage存储嵌套状态

你的黑名单配置不生效、无法给不同状态指定不同存储引擎的核心原因有两个：

• 重复嵌套了persistReducer：根级配置直接对整个合并后的rootReducer做了AsyncStorage全量持久化，且没有配置任何黑白名单，外层持久化会直接覆盖子reducer的持久化配置，相当于整个状态全量存入AsyncStorage，子级配置的黑名单完全不会生效。
• 单级persist配置只能给当前reducer指定一个存储引擎，无法直接给同一个reducer下的不同一级键配置不同存储引擎，需要拆分持久化切片实现。

• 移除多余的根级全量持久化包裹，避免双层嵌套导致配置冲突
• 对需要用不同存储引擎的状态切片单独配置persist规则：
  • favouriteArticlesReducer整体使用AsyncStorage持久化
  • 拆分readArticlesReducer的两个一级状态：readArticles字段用AsyncStorage持久化，currentArticle字段用你导入的localStorage引擎持久化
• 注意：如果是React Native项目，redux-persist/lib/storage是web端专属的localStorage引擎，RN环境无法正常使用，要实现应用重启/杀进程自动清空currentArticle的效果，替换为内存存储redux-persist/es/storage/createMemoryStorage即可，内存数据会在应用进程销毁后自动清除。

import { createStore, combineReducers, applyMiddleware } from 'redux';
import favouriteArticlesReducer from './reducers/favouriteArticlesReducer';
import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
import webLocalStorage from 'redux-persist/lib/storage' // web端localStorage
// RN端用下面这个替换上面的web存储，实现杀进程自动清空
// import createMemoryStorage from 'redux-persist/es/storage/createMemoryStorage';
// const memoryStorage = createMemoryStorage();
import thunk from 'redux-thunk'
import readArticlesReducer from './reducers/readArticlesReducer';

// 收藏文章全量存AsyncStorage
const favouriteArticlesPersistConfig = {
    key: 'favouriteArticlesReducer',
    storage: AsyncStorage,
};

// 已读文章列表存AsyncStorage
const readArticlesListPersistConfig = {
    key: 'readArticles',
    storage: AsyncStorage,
    whitelist: ['readArticles'] // 只持久化readArticles字段
};

// 当前文章存临时存储（web用localStorage，RN用内存存储）
const currentArticlePersistConfig = {
    key: 'currentArticle',
    storage: webLocalStorage, // RN环境替换为memoryStorage
    whitelist: ['currentArticle'] // 只持久化currentArticle字段
};

const rootReducer = combineReducers({
    favouriteArticlesReducer: persistReducer(favouriteArticlesPersistConfig, favouriteArticlesReducer),
    // 对readArticlesReducer叠加两层定向持久化，分别匹配不同字段对应存储引擎
    readArticlesReducer: persistReducer(
        readArticlesListPersistConfig, 
        persistReducer(currentArticlePersistConfig, readArticlesReducer)
    )
});

// 移除原来的根级persistReducer包裹，直接用组合好带持久化规则的rootReducer创建store
export const store = createStore(rootReducer, applyMiddleware(thunk));
export const persistor = persistStore(store);

配置说明：同一个reducer可以叠加多层persistReducer，每层配置不同的存储引擎和白名单，每层只会持久化自己白名单内指定的字段到对应存储，不会出现全量存储的问题，也不需要额外配置黑名单。

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