useSelector获取Redux状态异常：dispatch更新后返回undefined

核心问题 #

你的Redux状态更新后属性变成undefined，根本原因是把slice的reducer写成了异步函数。Redux的reducer必须是同步纯函数，不能包含async/await这类异步操作——当reducer是async函数时，它会返回一个Promise对象，而不是更新后的state，这会导致Redux store里的userReducer被替换成Promise，后续读取state.userReducer.jwtToken自然就是undefined。

修复步骤 #

1. 重构User Slice，分离异步逻辑

把AsyncStorage的异步操作移到RTK的createAsyncThunk中，让reducer只负责同步更新状态：

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { StorageKeys } from "../../constant/storageKeys";

const initialState = {
  jwtToken: "",
  isAuthenticated: false,
};

// 定义异步认证操作
export const authenticate = createAsyncThunk(
  "user/authenticate",
  async (jwt) => {
    // 异步存储token
    await AsyncStorage.setItem(StorageKeys.JWT_TOKEN, jwt);
    return jwt; // 返回token，供后续更新状态使用
  }
);

// 定义异步登出操作
export const logout = createAsyncThunk(
  "user/logout",
  async () => {
    // 异步移除token
    await AsyncStorage.removeItem(StorageKeys.JWT_TOKEN);
  }
);

const userSlice = createSlice({
  name: "UserSlice",
  initialState,
  extraReducers: (builder) => {
    // 处理认证成功的状态更新
    builder.addCase(authenticate.fulfilled, (state, action) => {
      state.jwtToken = action.payload;
      state.isAuthenticated = true;
    });
    // 处理登出成功的状态更新
    builder.addCase(logout.fulfilled, (state) => {
      state.jwtToken = "";
      state.isAuthenticated = false;
    });
  },
});

export default userSlice.reducer;

2. 调整组件中的dispatch调用

在RootView的useEffect中，直接把token传给authenticate thunk即可：

useEffect(() => {
  async function fetchToken() {
    let jwtToken = await AsyncStorage.getItem(StorageKeys.JWT_TOKEN);
    if (jwtToken !== null) {
      // 直接传入token，不需要包装成对象
      dispatch(authenticate(jwtToken));
    }
    setFetchingToken(false);
  }

  fetchToken();
}, []);

关键规则重申 #

• Redux reducer必须是同步纯函数：不能有异步操作、不能修改参数、相同输入必须返回相同输出。
• 所有异步逻辑（API请求、本地存储读写等）都要放在thunk函数中，RTK默认集成了thunk中间件，直接用createAsyncThunk即可。

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