错误：操作必须是普通对象。在 redux 中使用自定义中间件进行异步操作

下面是我的动作创建者的代码：

export function fetchPosts()
  {
    const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);
    return
      {
        type: FETCH_POSTS;
        payload: request

      };
  }

接下来输入：FETCH_POSTS，如果我添加 , 而不是 ;我收到错误“意外的令牌”。这是动作创建者的语法吗？

然后如果我将 , 替换为 ;编译时我收到错误“操作必须是纯 Javascript 对象”。

知道为什么吗？

GibboK的回答已经指出了语法错误。

但是，我认为您不了解正确使用操作。你跑：

const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);

这是创造一个承诺。您当前正在执行操作中返回该信息。减速器应该是确定性的且无副作用，因此操作应该是普通的 JS 对象。您不应该提交承诺。

相反，您应该使用一些相关的中间件，例如redux-thunk, redux-saga或者是其他东西。当实际的承诺得到解决时，您应该发送一个操作。

作为一个简单的例子，使用redux-thunk:

export const fetchPosts = () => (dispatch) => {
    // Send action to notify request started. Reducers often want to
    // update the state to record that a request is pending, e.g. for
    // UI purposes.
    dispatch({type: FETCH_POSTS_START});

    // Start request
    request = axios.get(`${ROOT_URL}/posts${API_KEY}`)
       .then(res => { 
          // Successfully received posts, submit response data
          dispatch({type: FETCH_POSTS_COMPLETE, payload: res.data})
        })
       .catch(err => { 
          // API call failed, submit error
          dispatch({type: FETCH_POSTS_ERROR, payload: err})
        });
};

请注意，此代码只是一个示例，不一定适合在生产系统中使用。