Promise resolve后返回值无法在.then中赋值并存入Redux store怎么解决

错误原因 #

• Redux Reducer必须是无副作用的纯函数，禁止在Reducer内部执行异步请求、接口调用等操作，Reducer仅能根据传入的state和action同步计算返回新的state。
• 你代码中apiTest()返回的是Promise实例，.then回调属于异步微任务，会在同步代码执行完后才触发。你在getData中直接return的时候，.then还未执行，data变量没有被赋值，最终存到listData里的只是Promise对象，不是接口返回的真实数据。
• API接口代码中导入的React、useEffect、useState完全没有被使用，属于冗余导入，可以直接删除。

修复方案 #

你需要使用Redux异步中间件（推荐用最简单的redux-thunk）来处理异步请求逻辑，所有接口调用放在action中执行，请求拿到结果后再发action通知Reducer更新状态。

1. 先修正API接口代码 #

// 移除无用的React相关导入
const apiCall = async () => {
  try {
    const payload = await fetch("https://jsonplaceholder.typicode.com/users");
    const results = await payload.json();
    return results;
  } catch (err) {
    console.log(`error found of type ${err}`);
  }
};

export default apiCall;

2. 配置redux-thunk中间件 #

在你创建Redux store的位置，引入redux-thunk并注册为中间件，示例：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import contactListReducer from './reducers/contactListReducer';

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

3. 编写异步Action #

新建action文件，编写异步请求逻辑：

import apiCall from "../api/ApiTest";

export const fetchContactList = () => {
  return async (dispatch) => {
    const result = await apiCall();
    // 请求成功后派发action，把数据传给Reducer
    dispatch({
      type: "FETCH_SUCCESS",
      payload: result
    });
  }
}

4. 修正Reducer代码 #

移除Reducer内的异步逻辑，仅做状态更新：

const initialState = {
  listData: null
};

const contactListReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCH_SUCCESS":
      return Object.assign({}, state, {
        listData: action.payload
      });
    default:
      return state;
  }
};

export default contactListReducer;

5. 组件中触发请求 #

在需要拉取数据的组件中，dispatch上面写的异步action即可：

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchContactList } from '../actions/contactActions';

function ContactList() {
  const dispatch = useDispatch();
  const listData = useSelector(state => state.listData);

  useEffect(() => {
    // 组件挂载时触发请求
    dispatch(fetchContactList());
  }, [dispatch]);

  // 后续可以直接使用listData渲染
  return <div>{/* 渲染逻辑 */}</div>
}

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