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 ,那么问题就在被注释的里面,否则问题就在现有的代码里,抽丝剥茧,一步步的排除。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,269评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,634评论 25 709
  • http://gaearon.github.io/redux/index.html ,文档在 http://rac...
    jacobbubu阅读 80,135评论 35 198
  • 当记手机号码时,简单的数字编码就能做到。比如 1 37 36 58 39 47 每个手机号码第一位都是 1,后面一...
    芦荟加冰阅读 689评论 0 1
  • 你做好准备了吗? 我想从来没有人告诉过你,22岁的年纪,竟会开始觉得自己变老。。 已经有些光景,被不认识的大人教他...
    极致0602阅读 519评论 0 0