React Redux从Firebase取用户数据返回含_A/_x/_y/_z属性对象问题

核心问题 #

你看到的_A、_x、_y、_z是Promise对象的内部属性，原因是你把Redux reducer定义成了async函数——Redux要求reducer必须是纯同步函数，async函数执行后会返回一个Promise实例，Redux错误地将这个Promise作为状态存储，导致组件获取到的是Promise而非预期的用户对象。

解决方案 #

把异步逻辑从reducer中移除，放到action creator里，配合Redux Thunk这类中间件处理异步操作：

1. 配置Redux Thunk中间件（如果未安装）
   先安装依赖：

   npm install redux-thunk
   

   然后在创建store时添加中间件：

   import { createStore, applyMiddleware } from 'redux';
   import thunk from 'redux-thunk';
   import usersReducer from './reducers/usersReducer';
   
   const store = createStore(usersReducer, applyMiddleware(thunk));
   

2. 编写异步Action Creator
   将Firebase数据请求逻辑放在action creator中，请求完成后dispatch同步action更新状态：

   // 定义action类型
   const FETCH_USER_DATA_SUCCESS = 'FETCH_USER_DATA_SUCCESS';
   const FETCH_USER_DATA_FAILURE = 'FETCH_USER_DATA_FAILURE';
   
   // 异步action creator
   export const fetchUserData = (userUid) => async (dispatch) => {
     const app = initializeApp(firebaseConfig);
     const db = getFirestore(app);
     const docRef = doc(db, "users", userUid);
     const docSnap = await getDoc(docRef);
     
     if (docSnap.exists()) {
       dispatch({
         type: FETCH_USER_DATA_SUCCESS,
         payload: docSnap.data()
       });
     } else {
       console.log("No such document!");
       dispatch({ type: FETCH_USER_DATA_FAILURE });
     }
   };
   

3. 修正Reducer（纯同步函数）
   去掉async关键字，只处理同步action：

   const initialState = {
     user : {
       firstname : "",
       lastname : "",
       todoList : [],
       addressBook : []
     },
     loading: false,
     error: null
   };
   
   const usersReducer = (state = initialState, action) => {
     switch(action.type) {
       case FETCH_USER_DATA_SUCCESS:
         return {
           ...state,
           user: {
             ...state.user,
             firstname: action.payload.firstname,
             lastname: action.payload.lastname,
             // 若需要从接口获取todoList和addressBook，替换为action.payload对应字段
             todoList: [],
             addressBook: []
           }
         };
       case FETCH_USER_DATA_FAILURE:
         return {
           ...state,
           error: "用户数据获取失败"
         };
       default:
         return state;
     }
   };
   

关键说明 #

• Reducer必须是纯函数：不能包含异步操作、副作用，只能根据传入的state和action返回新的状态对象。
• 异步操作由中间件处理：Redux Thunk允许action creator返回函数，而非普通对象，这样就能在函数内部执行异步逻辑，完成后再dispatch同步action触发状态更新。

内容的提问来源于stack exchange，提问作者Théo Pantecouteau