React-Redux：在异步 API 调用中成功分配动作后，状态未使用正确的数据更新

Question

我正在开发一个利用 Redux 进行状态管理的 React 应用程序，我遇到了异步操作的问题。我有一个对 API 进行异步调用然后根据结果分派成功或错误操作的操作。但是，在发送成功操作后，状态不会更新为正确的数据。

这是我使用的代码示例：

// Action creator
export const fetchData = () => {
  return dispatch => {
    dispatch({ type: 'FETCH_REQUEST' });

    return fetch('https://example.com/data')
      .then(response => response.json())
      .then(data => {
        dispatch({ type: 'FETCH_SUCCESS', payload: data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_ERROR', payload: error });
      });
  };
};

// Reducer
const initialState = {
  data: null,
  loading: false,
  error: null
};

export const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_ERROR':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

在这个例子中，当一个按钮被点击时，fetchData() action creator 被调度，dataReducer 用获取的数据更新状态。然而，即使使用正确的数据发送了成功操作，状态也没有按预期更新。

可能是什么导致了这个问题，我如何确保状态在发送成功操作后更新为正确的数据？

Answer 1

我希望，需要用 async 和 await 更新代码，提取到 fecth api 的单独函数然后调用，然后在调用 reducer 获取数据之前。 例子： `export const fetchData = () => { 返回异步函数（调度）{

export const fetchData = () => {
return async function(dispatch) {
        await dispatch({ type: 'FETCH_REQUEST' });
        try {
            const response = await a.fecth();
            await dispatch(dispatch({ type: 'FETCH_SUCCESS', payload: data }));
        }
        catch(error) {
            await dispatch({ type: 'FETCH_ERROR', payload: error });
        }