在reducer中使用expo-secure-store取JWT返回Promise而非令牌如何解决

问题核心原因 #

expo-secure-store提供的getItemAsync是异步API，所有async函数的返回值本质都是Promise对象，你当前的写法是在同步声明的INIT_STATE中直接调用异步方法，同步执行逻辑不会等待异步操作完成，.then()也只是在Promise链中处理结果，不会把Promise实例转换为它的返回值，所以你拿到的永远是Promise对象而非令牌字符串。

解决方案 #

Redux reducer的初始状态必须是同步可计算的，你需要调整实现逻辑：

1. 先把初始状态的authUser设为占位值（null/空字符串）

const INIT_STATE = {
  loader: false,
  alertMessage: '',
  successMessage: '',
  showMessage: false,
  initURL: '',
  authUser: null, // 初始值设为null，后续异步获取后更新
  tempAuth: '',
  currentScreen: 0,
  showSuccessMessage: false,
  currentUser: null,
  sendOTP: false,
};

2. 新增reducer case处理令牌更新逻辑

// 你的reducer逻辑中新增对应处理
switch (action.type) {
  // 其余原有case保留
  case 'SET_AUTH_TOKEN':
    return {
      ...state,
      authUser: action.payload.token
    }
  default:
    return state
}

3. 在应用初始化阶段异步获取令牌并更新状态
   可以在应用根组件挂载时执行获取逻辑，示例如下：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import * as SecureStorage from 'expo-secure-store';

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

  useEffect(() => {
    const initAuthToken = async () => {
      try {
        const token = await SecureStorage.getItemAsync('token');
        if (token) {
          dispatch({
            type: 'SET_AUTH_TOKEN',
            payload: { token }
          });
        }
      } catch (error) {
        console.log('令牌读取失败', error);
      }
    };
    initAuthToken();
  }, [dispatch]);

  // 其余根组件渲染逻辑
}

如果你使用了Redux Thunk或者Redux Toolkit，也可以把这段异步逻辑封装为thunk action，在应用初始化时触发即可。

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