首页
学习
活动
专区
工具
TVP
发布

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。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180112G09ULE00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券