React-Native中React-Redux存储用户数据重启后格式异常问题

问题根源 #

1. Reducer初始状态错误使用异步操作：AsyncStorage.getItem()是异步方法，返回的是Promise对象，直接将其作为Reducer的初始state，导致重启应用后state是Promise实例（即你看到的包含_A/_x/_y/_z的异常结构）。
2. 未解析存储的JSON字符串：即使成功读取到存储的用户数据，也只是JSON字符串，没有转换为JavaScript对象，无法适配业务逻辑。

修复步骤 #

1. 修改User Reducer #

将Reducer的初始状态设为null，新增USER_INIT action类型用于初始化用户数据：

import AsyncStorage from '@react-native-async-storage/async-storage';

export function userReducer(
  state = null,
  action,
) {
  switch (action.type) {
    case 'LOGIN':
      return action.payload;
    case 'LOGOUT':
      return null;
    case 'VERIFY':
      return { ...state, verified: action.payload };
    case 'USER_INIT':
      return action.payload; // 初始化用户数据
    case 'USER_LIST_RESET':
      return { users: [] };
    default:
      return state;
  }
}

2. 添加应用初始化逻辑 #

在应用根组件（或入口文件）中，添加异步初始化逻辑，读取并解析存储的用户数据后dispatch到Reducer：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import AsyncStorage from '@react-native-async-storage/async-storage';

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

  useEffect(() => {
    const initStoredUser = async () => {
      try {
        const storedUserStr = await AsyncStorage.getItem('user');
        if (storedUserStr) {
          // 将JSON字符串解析为用户对象
          const user = JSON.parse(storedUserStr);
          dispatch({ type: 'USER_INIT', payload: user });
        }
      } catch (err) {
        console.error('加载用户数据失败:', err);
      }
    };

    initStoredUser();
  }, [dispatch]);

  // 渲染其他组件
}

3. 保留现有登录逻辑（无需修改） #

你当前的登录代码中，JSON.stringify(data)后存入AsyncStorage的操作是正确的，继续保留即可：

const submitForm = async () => {
  if (isValidForm()) {
    try {
     const { data } = await axios.post(
    'https://c36a-196-235-44-112.eu.ngrok.io/login',
        {
          email,
          password,
        },
      );
      dispatch({ type: 'LOGIN', payload: data });
      AsyncStorage.setItem('user', JSON.stringify(data));
      console.log('Logged In');
      navigation.navigate('home');
    } catch (error) {
      console.log(error.message);
    }
  }
};

验证效果 #

重启应用后，根组件的useEffect会自动执行，读取并解析存储的用户数据，通过USER_INIT action更新Redux状态，此时在个人页面通过useSelector获取的user会和登录成功时的格式完全一致。

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