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

以下是我的操作创建者的代码：

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

      };
  }

在type旁边：FETCH_POSTS，如果我添加，而不是；我得到了一个意外的错误标记。这就是动作创建者的语法吗

那么如果我换成,；编译时，我得到错误的动作必须是纯Javascript对象

---

知道为什么吗？

当你用

替换
，
您会收到一个错误，因为正如错误消息所述，操作必须返回一个JavaScript对象

在JavaScript中，对象属性应该用
，
分隔，如下所示：

return
      {
        type: FETCH_POSTS, // use comma here
        payload: request   
      };

这样，
return
语句将返回一个具有两个属性的新对象
type
和
payload
GibboK的回答已经指出了语法错误

但是，我认为您不理解如何正确使用操作。您运行：

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

这是创造一个承诺。您当前正在操作中返回此信息。还原器是确定的，没有副作用，因此为什么操作应该是普通的JS对象。你不应该提交承诺

相反，您应该使用一些相关的中间件，例如，或其他东西。您应该在实际承诺解决后发送操作

作为一个简单的人为示例，使用
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})
        });
};

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

操作
是普通的JavaScript对象。操作必须具有
类型
属性，指示正在执行的操作类型。类型
通常应定义为
字符串常量
。一旦你的应用程序
如果足够大，您可能希望将它们移动到单独的模块中

和行动创造者

动作创建者是创建动作的函数

在Redux中，动作创建者只需返回一个动作：

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

因此，当您通过
dispatch
从组件调用
action creator
时，您的action creator只需返回一个普通的javascript对象即可

所以一个正常的动作创造者将会

export function fetchPosts()
  {

    return
      {
        type: FETCH_POSTS;
        payload: "somevalue"

      };
  }

现在，如果您想在action Creator中调用API，您需要在创建应用商店时使用中间软件，如
redux-thunk
或
redux-saga

像

您可以使用中间件配置您的商店，您可以修改您的操作以

export function fetchPosts() {
    return (dispatch) =>  {   
        axios.get(`${ROOT_URL}/posts${API_KEY}`)
               .then((response)=> {
                     dispatch( {
                           type: FETCH_POSTS,
                           payload: request

                     })
                })  
        } 

     }

根据文档

为什么需要redux thunk？

Redux Thunk中间件
允许您编写动作创建者
返回函数而不是操作。重击可以用来延迟
动作的
分派
，或仅当某个动作
条件满足。内部函数接收存储方法
分派和获取状态
作为
参数

您应该返回一个对象。对象属性由
，
而不是
分隔所以它应该是
类型：FETCH_POSTS，
可能重复的
export function fetchPosts() {
    return (dispatch) =>  {   
        axios.get(`${ROOT_URL}/posts${API_KEY}`)
               .then((response)=> {
                     dispatch( {
                           type: FETCH_POSTS,
                           payload: request

                     })
                })  
        } 

     }