如何在Redux-Toolkit中使用persistStore？仅持久化user reducer

要实现只持久化user reducer，你需要先把根reducer对象从configureStore中抽离出来，再用persistReducer包装它，最后将包装后的reducer传入configureStore。具体修改如下：

完整代码示例 #

import AsyncStorage from '@react-native-async-storage/async-storage'
import { persistStore, persistReducer } from 'redux-persist';
import { configureStore } from "@reduxjs/toolkit";
import { searchReducer } from "./search/searchSlice"
import { userReducer } from "./user/userSlice"

// 抽离根reducer对象
const rootReducer = {
  search: searchReducer,
  user: userReducer
}

// 配置持久化规则
const persistedReducer = persistReducer({
  key: "root",
  storage: AsyncStorage,
  whitelist: ['user'] // 填写要持久化的slice键名
}, rootReducer) // 传入抽离的根reducer

// 使用包装后的reducer创建store
export const store = configureStore({
  reducer: persistedReducer
})

export const persistor = persistStore(store)

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

关键说明 #

• whitelist: ['user']：whitelist数组里填写你想要持久化的slice键名，也就是根reducer中userReducer对应的键user。
• 第二个???位置填抽离出的rootReducer：必须把原本写在configureStore内的reducer对象单独定义，才能传给persistReducer完成包装。
• 最终要将persistedReducer传入configureStore的reducer字段，替换原来的对象，这样持久化逻辑才能生效。

内容的提问来源于stack exchange，提问作者Kos-Mos