Redux Persist无法存储数据问题求助

核心问题 #

1. Reducer导入错误：store里导入的addUserSlice是slice对象，不是对应的reducer，导致persistReducer包装的目标错误。
2. Persist配置不匹配：whitelist:['addUser']期望根reducer下存在addUser这个键，但当前直接把slice reducer作为根reducer，没有做组合，白名单规则完全不生效。
3. SignIn逻辑破坏state结构：signInUser里直接返回state.filter(...)，但state是包含userData的对象，不是数组，这么写会直接替换整个state结构，不仅逻辑错误，还会导致持久化数据异常。

修复后的代码 #

1. Store 文件修改

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { persistReducer, persistStore } from "redux-persist";
import AsyncStorage from '@react-native-async-storage/async-storage';
// 导入slice的默认导出（也就是对应的reducer）
import addUserReducer from "./slices/addUserSlice";

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    whitelist:['addUser'] // 现在根reducer下有addUser键，白名单规则生效
}

// 先组合reducers，把addUserReducer挂载到addUser键下
const rootReducer = combineReducers({
    addUser: addUserReducer
})

const persistedReducer = persistReducer(persistConfig, rootReducer)
export const store = configureStore(
    {
       reducer: persistedReducer,
       middleware: (getDefaultMiddleware) => getDefaultMiddleware({
        immutableCheck: false,
        serializableCheck: false,
      })
    }
);
export const persistor = persistStore(store)

2. Slice 文件修改

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

export const addUserSlice = createSlice({
    name:'addUser',
    initialState:{
        userData:[],
        currentUser: null // 新增字段存储当前登录用户
    },

    reducers:{
        signupUser:(state, action)=>{
            console.log("adduser slice-----", action.payload) 
            state.userData.push(action.payload)
        },
        signInUser:(state, action)=>{
            const {username, password} = action.payload
            // 找到匹配用户后存入currentUser，不破坏原有state结构
            state.currentUser = state.userData.find(item=>item.username===username && item.password ===password)
        }
    }
})

export const { signupUser, signInUser } = addUserSlice.actions; 
export default addUserSlice.reducer

额外必做步骤 #

要让持久化生效，必须在应用入口用PersistGate包裹组件，示例：

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

export default function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {/* 你的应用根组件 */}
      </PersistGate>
    </Provider>
  );
}

另外确认@react-native-async-storage/async-storage已经正确安装并在项目中配置完成。

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