React Native AsyncStorage使用async/await仍返回Promise问题求助

首先，核心问题出在Redux Reducer中存在异步操作，以及你对async/await的使用场景理解有误：

1. Redux的Reducer必须是纯同步函数，它不能包含异步逻辑（比如调用AsyncStorage.getItem这种返回Promise的方法）。你的getUser是async函数，它返回的是一个Promise，所以initialState.info实际上是一个Promise对象，而不是你期望的用户数据——这就是你调试时看到_55字段（Promise内部状态）的原因。
2. initialState中的login: !!this.info完全无效，因为this.info是Promise对象，!!任何对象都会返回true，不管Promise是否resolved。

正确的解决方案步骤 #

1. 重构Reducer：移除异步逻辑，定义同步初始状态

Reducer只负责处理同步的state更新，初始化状态设为默认的同步值：

import { LOGIN, LOGOUT, UPDATE, LOAD_USER } from './../actions/authActions'

export type State = {
  info: Object | null,
  login: boolean,
}

// 同步的初始状态，没有异步操作
const initialState = {
  info: null,
  login: false,
};

function loginReducer(state: State = initialState, action) {
  switch (action.type) {
    case LOGIN:
      return {
        info: action.payload,
        login: true,
      };
    case LOGOUT:
      return {
        info: null,
        login: false,
      };
    case UPDATE:
      return {...state, info: {...state.info, ...action.payload}}; // 用展开运算符避免直接修改原对象
    case LOAD_USER: // 新增处理加载用户的action类型
      return {
        ...state,
        info: action.payload,
        login: !!action.payload, // 根据加载到的用户数据判断登录状态
      };
    default:
      return state;
  }
}

export default loginReducer;

2. 在Action中添加加载用户的异步逻辑

把从AsyncStorage获取用户的逻辑放到Action里（你已经在用Redux Thunk中间件，因为你的login是异步action），新增一个loadUser action：

import { AsyncStorage } from "react-native";
import { requestLogIn, requestLogOut } from "../../config/api/authApi"

export const LOGIN = "LOGIN";
export const LOGOUT = "LOGOUT";
export const UPDATE = "UPDATE";
export const ERROR = "ERROR";
export const LOAD_USER = "LOAD_USER"; // 新增action类型

// 新增：从AsyncStorage加载用户信息的action
export function loadUser() {
  return async dispatch => {
    try {
      const userStr = await AsyncStorage.getItem("user");
      if (userStr !== null) {
        const user = JSON.parse(userStr);
        dispatch({ type: LOAD_USER, payload: user });
      } else {
        dispatch({ type: LOAD_USER, payload: null });
      }
    } catch (error) {
      console.warn("Error loading user from AsyncStorage: ", error);
      dispatch({ type: ERROR, payload: null });
    }
  }
}

export function login(user) {
  return dispatch => {
    return AsyncStorage.setItem("user", JSON.stringify(user))
      .then(() => {
        dispatch({ type: LOGIN, payload: user })
      }).catch((error) => {
        console.warn("Error: ", error);
        dispatch({ type: ERROR, payload: null })
      });
  }
}

// 修正logout的Thunk写法：你之前注释掉了return dispatch =>，导致函数无法正确分发action
export function logout(token) {
  return dispatch => { // 恢复这一行
    return requestLogOut(token).then((status) => {
      if (status) {
        return AsyncStorage.removeItem("user")
          .then(() => {
            dispatch({ type: LOGOUT })
          }).catch(() => {
            dispatch({ type: ERROR, payload: null });
          });
      } else {
        dispatch({ type: ERROR, payload: null });
      }
    })
  }
}

// other actions

3. 在应用启动时触发加载用户的Action

在你的根组件（比如App.js）中，当组件挂载时调用loadUser action，这样就能在应用启动时从AsyncStorage加载用户信息并更新Redux状态：

如果你用的是函数组件：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { loadUser } from './path/to/authActions';

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    // 组件挂载时加载用户信息
    dispatch(loadUser());
  }, [dispatch]);

  // 其他组件逻辑
  return (
    // ...
  );
}

如果你用的是类组件：

import { Component } from 'react';
import { connect } from 'react-redux';
import { loadUser } from './path/to/authActions';

class App extends Component {
  componentDidMount() {
    this.props.loadUser();
  }

  render() {
    // ...
  }
}

export default connect(null, { loadUser })(App);

关键知识点回顾 #

• Redux Reducer必须是纯同步函数：它只能根据当前state和action返回新的state，不能包含任何异步操作、API调用或者副作用。
• 异步逻辑必须放在Action或中间件中：Redux Thunk（你已经在使用）允许你编写返回函数的action，这样就能在函数内部处理异步操作，之后再分发同步action更新state。
• async/await只能在异步函数中生效：如果在同步环境中调用async函数，它只会返回Promise，必须通过await或者.then()来获取最终结果——而Reducer是同步环境，所以不能在这里使用。

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