React-Redux-Thunk异步Action直接dispatch失效，原因及替代实现咨询

问题描述 #

我编写的React-Redux-Thunk异步Action代码存在异常：请求能正常完成，但dispatch操作未生效。代码如下：

function addUser(user) {
  return {
    type: FETCH,
    payload: { user }
  };
}

// action creator returns a function
export function fetchUser(githubUserName) {
  console.log("fetching...");
  return (dispatch) => {
    return axios(`https://api.github.com/users/${githubUserName}`).then(
      (user) => {
        // dispatch(addUser(user.data));
        let res = user.data;
        dispatch({
          type: FETCH,
          payload: { res }
        });
      }
    );
  };
}

当取消注释dispatch(addUser(user.data));并注释下方直接dispatch的代码时，功能即可正常运行。请问是否有办法不借助addUser这个Action Creator实现正常的dispatch？

问题原因 #

核心问题是payload中的属性名不匹配：

• 使用addUser时，Action的payload携带的是user属性：payload: { user }
• 直接dispatch时，传递的是res属性：payload: { res }

你的Reducer逻辑应该是依赖action.payload.user来更新状态，直接dispatch时传递的属性名是res，Reducer无法读取到期望的数据，导致状态没有变化，看起来就像dispatch没生效。

解决方案 #

不需要借助addUser，只要把直接dispatch的Action中payload的属性名改成user即可，有两种写法：

写法1：显式指定属性名 #

export function fetchUser(githubUserName) {
  console.log("fetching...");
  return (dispatch) => {
    return axios(`https://api.github.com/users/${githubUserName}`).then(
      (user) => {
        dispatch({
          type: FETCH,
          payload: { user: user.data }
        });
      }
    );
  };
}

写法2：解构赋值简化代码 #

export function fetchUser(githubUserName) {
  console.log("fetching...");
  return (dispatch) => {
    return axios(`https://api.github.com/users/${githubUserName}`).then(
      ({ data: user }) => {
        dispatch({
          type: FETCH,
          payload: { user }
        });
      }
    );
  };
}

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