问题描述
在前端页面发请求到后端,控制台报出错误createStore.js:152 Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.
矛盾点
根据提示,actions 返回值需要是一个对象,检查代码发现确实是一个对象,按照代码走的流程检查代码,但没有发现问题,不知道问题是出在了哪里
问题解决
- 复制错误信息到浏览器,没有找到有价值的答案,自己开始逐步的查找
- 首先在action 发异步请求之前console.log ,发现是可以打印出值的,也就是说值可以正常从container传递到action, 那么问题是在action发请求从前端到后端的的过程中,还是在请求返回后到reducer 的过程中?
- 首先,排除干扰,注释到发请求的过程,将请求的返回值定义为定值,目的是排除因为请求本身的导致出错。注释后刷新页面,发现错误还在,那么问题肯定不是这个请求导致的。
- 思考从action 到reduce 的过程,中间起桥梁作用的是middleware,middleware 的数据流动过程为
action ---> dispatcher ---> middleware 1 ---> middleware 2 ---> reducers
,那么问题可能是middleware 出错了吗? - 检查middleware的用法,果然是这里写的不对,修改后解决了问题
反思
解决问题的方法
按照数据的流程,从头开始,精简代码,注释掉不相关的干扰代码,如果注释后代码ok ,那么问题就在被注释的里面,否则问题就在现有的代码里,抽丝剥茧,一步步的排除。