Redux Toolkit+redux-persist状态变为undefined及Middleware配置问题

我来帮你排查和解决这两个问题，你在Redux Toolkit结合redux-persist开发时踩了几个常见的坑：

问题1：Login/Register Reducer中异步逻辑导致状态更新失效 #

首先要明确：Redux Toolkit的createSlice里的reducers字段只能定义同步纯函数，你不能在reducer里写async/await或Promise异步逻辑。异步操作属于副作用，必须用RTK提供的createAsyncThunk来处理。

你当前的写法会导致两个核心问题：

• Redux无法识别异步reducer的返回值（Promise），无法触发状态更新流程
• 你直接给state.user赋值的操作完全脱离了Redux的状态追踪，修改的只是函数内部的临时变量，不是全局状态对象

修复方案：用createAsyncThunk重构异步逻辑 #

把登录、注册的异步逻辑抽成独立的thunk，然后在slice的extraReducers里处理异步的pending/fulfilled/rejected状态：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import api from '../../config/api';

// 注册异步thunk
export const register = createAsyncThunk(
  'auth/register',
  async (userData, { rejectWithValue }) => {
    try {
      const { data } = await api.post('users', userData);
      return data.data;
    } catch (err) {
      return rejectWithValue(err.response?.data?.error || '注册失败');
    }
  }
);

// 登录异步thunk
export const login = createAsyncThunk(
  'auth/login',
  async (credentials, { rejectWithValue }) => {
    try {
      const { data } = await api.post('sessions', credentials);
      return { user: data.user, token: data.token };
    } catch (err) {
      return rejectWithValue(err.response?.data?.error || '登录失败');
    }
  }
);

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    user: null,
    token: '',
    loading: false,
    error: null
  },
  reducers: {
    // 同步reducer示例：登出
    logout: (state) => {
      state.user = null;
      state.token = '';
    }
  },
  extraReducers: (builder) => {
    // 处理注册的异步状态
    builder
      .addCase(register.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(register.fulfilled, (state, action) => {
        state.loading = false;
        state.user = action.payload.user;
        state.token = action.payload.token;
      })
      .addCase(register.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      })
      // 处理登录的异步状态
      .addCase(login.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(login.fulfilled, (state, action) => {
        state.loading = false;
        state.user = action.payload.user;
        state.token = action.payload.token;
        console.log(state.user); // 现在这里能正确打印用户信息了
      })
      .addCase(login.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  }
});

export const { logout } = authSlice.actions;
export default authSlice.reducer;

问题2：Redux-Persist配置错误导致控制台报错 #

你的store配置存在两个关键错误：

1. persistConfig的whitelist与reducer键名不匹配：rootReducer里定义的键是authReducer，但whitelist里写的是'auth'，redux-persist找不到对应的reducer，会抛出错误。
2. AsyncStorage导入路径错误：React Native新版本中，AsyncStorage已从react-native包迁移到@react-native-async-storage/async-storage，旧导入方式会导致警告或报错。

修复后的store配置 #

首先安装AsyncStorage依赖（如果未安装）：

npm install @react-native-async-storage/async-storage
# 或
yarn add @react-native-async-storage/async-storage

修改store代码：

import { configureStore, combineReducers, getDefaultMiddleware } from '@reduxjs/toolkit';
import AsyncStorage from '@react-native-async-storage/async-storage'; // 修正导入路径
import { persistReducer, persistStore, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist';
import authReducer from '../features/authSlice'; // 替换为你的authSlice实际路径
import newsReducer from '../features/newsSlice';

const rootReducer = combineReducers({
  auth: authReducer, // 统一键名为'auth'，与whitelist匹配
  news: newsReducer
});

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: ['auth'] // 现在与rootReducer的键名完全匹配
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
    },
  }),
});

export const persistor = persistStore(store);
export default store;

补充说明 #

你之前遇到state.user赋值后打印undefined的核心原因：异步reducer里的state只是函数内部的临时变量，不是Redux的全局状态对象，修改它不会触发状态更新。用createAsyncThunk+extraReducers的方式，才能让Redux正确处理异步操作后的状态变更。

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