Redux和中间件实现大揭秘

所属系列：【前端工程师系列】

所属主题：【框架】

写在前面

技术层面的东西，不能面面俱到。我相信有心人总能从细枝末节当中学到东西。做到掌握技术，掌握职业，创造财富。

就像这首齐秦的《狂流》，时间总在流失，没有人能挽回时间的狂流。

珍惜，真意做自己想做的事。

正文开始：

1

Redux为什么会产生？它为什么是当前这种设计？

原始问题？

组件的树形结构决定了数据的流向，导致的数据传递黑洞（看不懂的，先了解下MVVM框架的东西）

怎么解决？

所有组件都通过中介者传递共享数据

方案：

中介者：

组件A修改数据

其他组件可以监听，也可以主动拿：

两个问题：

1 store.data可以直接被访问和修改->data和store分开&通过接口拿

2 只需要订阅和派发（派发的时候会把数据存起来并通知其他订阅者）

这个就是基本的redux雏形。后面的其实都是一些改进。

改进1： 数据处理耦合在store当中->抽出reducer并能传入初始state

reducer长这样：

reducer说是一个纯函数，本质上就是它不改变输入的参数，最后返回了一个新对象（规约）。也解决了可变数据结构的问题。

改进2：每个组件都需要依赖store，并且需要调用store的subscribe和dispatch方法->创建顶层容器并且扩展它的组件的能力

然后子组件内就可以这样调用了：

改进3： 这里的store没法传reducer和初始状态，因为你是里面调用的->createStore在外面做，然后把store传给顶层容器

改进3： 并且这样每个组件都有一个mapState方法，而且做得事都比较类似就是把state的数据过来-> 抽出一个connect函数

以上，就是redux核心的基本实现原理。

2

中间件为什么产生？

https://guoyongfeng.github.io/book/15/04-redux-logger%E7%9A%84%E5%BA%94%E7%94%A8%E5%92%8C%E7%90%86%E8%A7%A3.html

比如上面的logger中间件，就是想在store的dipatch方法里面做点其他事，比如打印下个性化的日志（当然中间件还能干其他事，这里没时间深入探究了，know how,then know why）。

怎么实现？

正常想法，当然是代理dispatch方法

后面就是一步步的改进，进化到正常的中间件的实现原理。

改进1：不希望改变原先store&dispatch内打印日志部分希望能做其他事情->传递一个middleware回调进去

改进2： 如何处理多个中间件（每个中间件做的事不一样）而且store的dispatch应该只被执行一次

改进3： 仔细看这里面的实现发现就是数组的reduceRight方法

改进4： 中间件里面的next函数是干嘛用的？->其实就是传进去的dispatch方法

以上，就是redux中间件实现的基本原理。

3

Action Creator是什么？

是对dispatch函数参数(也就是action)的一种抽象，便于Action的复用

比如我们这么写：

可能其他组件也需要写相似的代码，你需要复制代码。其实我们可以抽出一个creator。