Redux Reducer中Promise结果未正确赋值问题求助

你遇到的这个问题是Redux新手常踩的典型坑——Redux的reducer必须是同步的纯函数，不能直接在里面处理异步操作。咱们一步步拆解问题，然后给出两种可行的解决方案：

问题根源 #

你在GetResume分支里调用了context.ResumeData.getAll().then(...)，这是一个异步Promise操作。当reducer执行到return {...state,"resumenames":test}时，then里的代码还没来得及执行（异步操作需要等待请求完成），所以test还是初始的undefined，自然没法把正确的结果更新到state里。

Redux的核心设计原则是：reducer只负责接收action、同步计算并返回新的state，不能包含任何副作用（比如异步请求、修改外部变量）。

解决方案1：使用Redux Thunk（传统Redux方式） #

Thunk是Redux最常用的异步中间件，它允许你的action creator返回一个函数（而非普通的action对象），这样就能在函数里处理异步逻辑，等异步操作完成后再分发同步action更新state。

步骤1：定义异步Action Creator

把异步请求逻辑移到单独的action creator里：

import { StorageApiContext } from '../../app/api'; 

// 定义三个action类型，对应请求的不同状态
const GET_RESUME_REQUEST = "GET_RESUME_REQUEST";
const GET_RESUME_SUCCESS = "GET_RESUME_SUCCESS";
const GET_RESUME_FAILURE = "GET_RESUME_FAILURE";

// 异步action creator，返回一个可执行函数
export const getResume = (userId) => async (dispatch) => {
  // 先分发"请求开始"的action，告知state正在加载数据
  dispatch({ type: GET_RESUME_REQUEST });
  
  try {
    const context = new StorageApiContext();
    // 等待异步请求完成
    const result = await context.ResumeData
      .getAll((odata) => odata.filter(`userid eq '${userId}'`).select("resumename"));
    
    // 请求成功，分发携带结果的action
    dispatch({
      type: GET_RESUME_SUCCESS,
      payload: result
    });
  } catch (error) {
    // 请求失败，分发错误信息
    dispatch({
      type: GET_RESUME_FAILURE,
      payload: error.message || "获取简历数据失败"
    });
  }
};

步骤2：修改Reducer处理同步Action

更新你的reducer，处理这三个同步action，同时给state加上加载状态和错误状态（这是前端开发的最佳实践，能让UI显示加载中或错误提示）：

export function ResumeDataReducer(state = { 
  loading: false,
  resumenames: [],
  error: null
}, action) { 
  switch(action.type) { 
    case GET_RESUME_REQUEST:
      return { ...state, loading: true, error: null };
    case GET_RESUME_SUCCESS:
      return { ...state, loading: false, resumenames: action.payload };
    case GET_RESUME_FAILURE:
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  } 
}

步骤3：配置Redux Thunk中间件

确保你的Redux store已经配置了Thunk中间件。如果是传统Redux，创建store时要添加：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import ResumeDataReducer from './your-reducer-path';

const store = createStore(
  ResumeDataReducer,
  applyMiddleware(thunk)
);

解决方案2：使用Redux Toolkit（推荐） #

Redux Toolkit是官方推荐的Redux开发工具集，它内置了Thunk，还简化了action和reducer的编写，代码更简洁且不易出错。

步骤1：创建异步Thunk和Slice

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { StorageApiContext } from '../../app/api';

// 创建异步thunk，自动生成pending/fulfilled/rejected三种action类型
export const getResume = createAsyncThunk(
  'resume/getResume', // 唯一标识该thunk的名称
  async (userId) => {
    const context = new StorageApiContext();
    const result = await context.ResumeData
      .getAll((odata) => odata.filter(`userid eq '${userId}'`).select("resumename"));
    return result; // 返回结果会作为action.payload传入fulfilled回调
  }
);

// 创建slice，包含state和reducer逻辑
const resumeSlice = createSlice({
  name: 'resume',
  initialState: {
    resumenames: [],
    loading: false,
    error: null
  },
  reducers: {}, // 这里可定义同步action，当前场景不需要
  extraReducers: (builder) => {
    builder
      // 处理请求中状态
      .addCase(getResume.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      // 处理请求成功状态
      .addCase(getResume.fulfilled, (state, action) => {
        state.loading = false;
        state.resumenames = action.payload;
      })
      // 处理请求失败状态
      .addCase(getResume.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || "获取简历数据失败";
      });
  }
});

export default resumeSlice.reducer;

步骤2：配置Store

Redux Toolkit的configureStore默认已经包含了Thunk中间件，创建store非常简单：

import { configureStore } from '@reduxjs/toolkit';
import resumeReducer from './your-slice-path';

const store = configureStore({
  reducer: {
    resume: resumeReducer
  }
});

如何在组件中调用？ #

不管用哪种方案，你都可以在组件里通过useDispatch hook调用这个异步action creator：

import { useDispatch } from 'react-redux';
import { getResume } from './your-action-path';

function YourComponent() {
  const dispatch = useDispatch();
  
  const fetchResume = (userId) => {
    dispatch(getResume(userId));
  };
  
  // 示例：点击按钮触发数据获取
  return <button onClick={() => fetchResume('your-user-id')}>获取简历列表</button>;
}

这样，当异步请求完成后，reducer会收到对应的action，就能正确更新state里的resumenames了！

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