已用Redux-Thunk中间件仍报错：Actions must be plain objects问题排查

你遇到的报错是因为getPosts这个action creator的写法不符合Redux-Thunk的要求。Redux-Thunk要求action creator返回一个接收dispatch的函数，但你现在的写法是直接把dispatch作为参数定义async函数，调用getPosts()时会立即执行这个async函数，返回的是Promise对象，而不是Thunk中间件能处理的函数，所以Redux会认为你传入的是非法的action（要求是plain object，实际是Promise）。

修正后的Actions代码 #

import * as api from "../api/index"

export const getPosts = () => async dispatch => {
    try {
        const { data } = await api.fetchPosts()
        dispatch({ type: "GET_ALL", payload: data })
    } catch (error) {
        console.log(error)
    }
}

修正逻辑说明 #

• 现在getPosts()会返回一个async函数，Redux-Thunk中间件会识别这个函数，自动把dispatch参数传入
• 在这个async函数内部，你可以正常执行异步请求，拿到数据后再dispatch真正的plain object类型action

你的Store配置、Reducer和App.js中的dispatch调用都是正确的，只需要修改Actions文件里getPosts的写法即可解决报错。

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