React-redux报错Actions must be plain objects,求排查解决方法
排查步骤
- 优先检查action内的请求类型dispatch写法
你代码中dispatch(PROJECT_LIST_REQUEST)这行存在极高问题概率:如果PROJECT_LIST_REQUEST是你定义的type字符串常量(比如const PROJECT_LIST_REQUEST = "PROJECT_LIST_REQUEST"),直接dispatch字符串不属于普通对象,会触发报错。请修改为标准action对象格式:dispatch({ type: PROJECT_LIST_REQUEST }) - 检查thunk中间件生效情况
- 确认项目入口文件(通常是
index.js)已经用react-redux的Provider组件将整个应用包裹,且正确传入了你配置的store,示例:
import { Provider } from 'react-redux' import store from './store' ReactDOM.createRoot(document.getElementById('root')).render( <Provider store={store}> <App /> </Provider> )- 检查
redux和redux-thunk的版本兼容性,如果使用的是redux@5.x版本,建议搭配redux-thunk@3.x版本使用,避免版本不兼容导致中间件失效。
- 确认项目入口文件(通常是
- 检查action导入正确性
你的listProjects是命名导出,在调用的组件中必须用命名导入语法引入,不要写成默认导入:
可以在useEffect中打印// 正确写法 import { listProjects } from '你存放action的文件路径' // 错误写法,会导致listProjects为undefined,dispatch时触发报错 // import listProjects from '你存放action的文件路径'console.log(typeof listProjects),确认返回值为function即导入正确。 - 检查是否存在多份Redux实例
如果你在项目中多次调用createStore创建了不同的store实例,或者某个局部组件单独引入了未挂载thunk的store,也会导致dispatch函数无法识别异步action。
内容的提问来源于stack exchange,提问作者Austin Howard
相关产品推荐
相关产品推荐

