如何使用Redux Persist仅持久化指定的currentLanguage键？

我希望仅持久化settingsReducer中的currentLanguage键。首次启动App后触发setCurrentLanguage('en')操作，重启App后预期数据为{ currentLanguage: 'en', test: 'original' }，但实际结果是{ currentLanguage: 'en', test: 'en' }，尝试用blocklist: ['test']替换whitelist: ['currentLanguage']仍未解决。

相关代码 #

settingsReducer #

import { createSlice } from '@reduxjs/toolkit';

export const initialState = {
  currentLanguage: '',
  test: 'original',
};

const slice = createSlice({
  name: 'settings',
  initialState,
  reducers: {
    setCurrentLanguage(state, { payload }: { payload: string }) {
      state.currentLanguage = payload;
      state.test = payload;
    },
  },
});

const settingsReducer = slice.reducer;

export const {
  setCurrentLanguage,
} = slice.actions;

export default settingsReducer;

持久化配置代码 #

import AsyncStorage from '@react-native-async-storage/async-storage';
import { combineReducers } from '@reduxjs/toolkit';
import { persistReducer } from 'redux-persist';
import settingsReducer from './settingsReducer';

const rootPersistConfig = {
  key: 'root',
  storage: AsyncStorage,
};

const settingsPersistConfig = {
  key: 'settings',
  storage: AsyncStorage,
  whitelist: ['currentLanguage'],
};

const combinedReducer = combineReducers({
  settings: persistReducer(settingsPersistConfig, settingsReducer),
});

const persistedReducer = persistReducer(
  rootPersistConfig,
  combinedReducer
);

解决方案 #

问题出在两层persistReducer嵌套：你先给settings reducer单独配置了持久化，又给整个root reducer套了一层persist，这会导致root的持久化直接保存了整个settings状态，覆盖了子reducer的whitelist/blocklist配置。

有两种修改方式：

方式1：移除root层级的persist配置（推荐，若不需要持久化其他reducer） #

import AsyncStorage from '@react-native-async-storage/async-storage';
import { combineReducers } from '@reduxjs/toolkit';
import { persistReducer } from 'redux-persist';
import settingsReducer from './settingsReducer';

const settingsPersistConfig = {
  key: 'settings',
  storage: AsyncStorage,
  whitelist: ['currentLanguage'], // 仅持久化currentLanguage
};

const combinedReducer = combineReducers({
  settings: persistReducer(settingsPersistConfig, settingsReducer),
});

export default combinedReducer;

方式2：保留root层级persist，将settings排除在root持久化外 #

如果你需要持久化其他reducer，可在root配置中把settings加入blacklist，让子reducer的单独配置生效：

import AsyncStorage from '@react-native-async-storage/async-storage';
import { combineReducers } from '@reduxjs/toolkit';
import { persistReducer } from 'redux-persist';
import settingsReducer from './settingsReducer';

const rootPersistConfig = {
  key: 'root',
  storage: AsyncStorage,
  blacklist: ['settings'], // 让settings使用自己的持久化配置
};

const settingsPersistConfig = {
  key: 'settings',
  storage: AsyncStorage,
  whitelist: ['currentLanguage'],
};

const combinedReducer = combineReducers({
  settings: persistReducer(settingsPersistConfig, settingsReducer),
});

const persistedReducer = persistReducer(rootPersistConfig, combinedReducer);

export default persistedReducer;

修改后重启App，currentLanguage会恢复为持久化的'en'，test则会使用initialState中的'original'值。

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