React — applyMiddleware

问题描述

在前端页面发请求到后端，控制台报出错误createStore.js:152 Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

矛盾点

根据提示，actions 返回值需要是一个对象，检查代码发现确实是一个对象，按照代码走的流程检查代码，但没有发现问题，不知道问题是出在了哪里

问题解决

1. 复制错误信息到浏览器，没有找到有价值的答案，自己开始逐步的查找
2. 首先在action 发异步请求之前console.log ,发现是可以打印出值的，也就是说值可以正常从container传递到action, 那么问题是在action发请求从前端到后端的的过程中，还是在请求返回后到reducer 的过程中？
3. 首先，排除干扰，注释到发请求的过程，将请求的返回值定义为定值，目的是排除因为请求本身的导致出错。注释后刷新页面，发现错误还在，那么问题肯定不是这个请求导致的。
4. 思考从action 到reduce 的过程，中间起桥梁作用的是middleware，middleware 的数据流动过程为action ---> dispatcher ---> middleware 1 ---> middleware 2 ---> reducers,那么问题可能是middleware 出错了吗？
5. 检查middleware的用法，果然是这里写的不对，修改后解决了问题

反思

解决问题的方法

按照数据的流程，从头开始，精简代码，注释掉不相关的干扰代码，如果注释后代码ok ,那么问题就在被注释的里面，否则问题就在现有的代码里，抽丝剥茧，一步步的排除。