锵哥带你读好书系列之深入浅出React和Redux第九章扩展Redux

闲絮：

这个图片特别好，十分的有感触。
此时此刻儿子呼唤着我：“爸爸，上来睡觉。”
我安抚了一下告诉他，爸爸还有篇文章要写，你先睡。
多么温馨的画面，庆为人父。

前言：

今天给大家带来的是 Redux 的扩展，啥？这玩意还可以扩展吗？
是的，还很溜，我们一起看看吧！

正文：

章节：《深入浅出 React 和 Redux》(第九章：扩展 Redux)

1.Redux 本身提供了很强大的数据流管理功能，但是 Redux 更强大之处在于它提供了扩展自身功能的可能性。

2. 两种扩展 Redux 的方法：
A: 中间件
B:Store Enhancer

3. 在 Express 框架中，中间件是一些函数，用于定制对特定请求的处理过程。作为中间件的函数互相是独立的，可以提供对记录日志、返回特定响应报头、压缩等等请求的处理操作，中间件这种架构设计使得可以重用通用逻辑，通过组合不同中间件可以完成复杂功能

4.Redux 和 Express 是两种功能不同的框架，中间件的概念也不完全一样，但是两者也有一些共同之处，如果把 Redux 和 Express 都看做一个对请求的处理框架的话，那么 Redux 中的 action 对象对应于 Express 中的客户端请求，而所有的中间件就组成处理请求的“管道”

5. 中间件的特定
A: 中间件是独立的函数
B: 中间件可以组合使用
C: 中间件有一个统一的接口

6. 所谓中间件是独立的函数，指的是中间件之间不应该有依赖关系，每个中间件应该能够独立被一个 Redux Store 使用，完成某一个特定功能

7. 正因为每个中间件只完成某一个特定功能，所以为了满足比较丰富的应用需求，应该能够在一个 Redux Store 上组合使用多个中间件。这些中间件按照指定顺序依次处理传入的 action，只有排在前面的中间件完成任务之后，后面的中间件才有机会继续处理 action，当然，每个中间件都可以中断对于某个 action 的“管道”，也就是不用后面的中间件继续处理了。

8. 不同中间件之所以能够组合使用，是因为 Redux 要求所有中间件必须提供统一的接口，每个中间件的实现逻辑都不一样，但是只有遵守统一的接口才能够和 Redux 和其他中间件对话

9. 以 action 为参数的函数对传入的 action 对象进行处理，因为 JavaScript 支持闭包（Clousure），在这个函数里可以访问上面两层函数的参数，所以可以根据需要做很多事情，包括以下功能
A: 调用 dispatch 派发出一个新 action 对象
B: 调用 getState 获得当前 Redux Store 上的状态
C: 调用 next 告诉 Redux 当前中间件工作完毕，让 Redux 调用下一个中间件
D: 访问 action 对象 action 上的所有数据
具有上面这些功能，一个中间件足够获取 Store 上的所有信息，也具有足够能力控制数据的流转

10. 如果按照上面这种方法定义中间件接口，似乎更容易理解，但是 Redux 并没有这么设计，因为 Redux 是根据函数式编程（Functional Programming）的思想来设计的，函数式编程的一个重要思想就是让每个函数的功能尽量小，然后通过函数的嵌套组合来实现复杂功能。

11. 使用中间件有两种方法，两种方法都离不开 Redux 提供的 applyMiddleware 函数。

12. 第一种方法是用 Redux 提供的 applyMiddleware 来包装 createStore 产生一个新的创建 Store 的函数。

13. 为了使用 thunkMiddleware，将 thunkMiddleware 作为参数传递给 applyMiddleware，产生了一个新的函数，新产生的函数实际上是一个 Store Enhancer（很快就会介绍到 Store Enhancer，在这里只需要理解 Store Enhancer 是一种能够增强 Store 功能的函数就行），这个 Store Enhancer 函数又将 Redux 的 createStore 作为参数，产生了一个加强版的创造 store 的函数，习惯上将这个增强的 createStore 命名为 configureStore，利用 configure-Store 创造的 Store 将具有 thunkMiddleware 中间件的功能

14. 对于没有使用其他 Store Enhancer 的场景，上述的方法还可以一用，但是实际中应用基本都会需要其他 Store Enhancer 的辅助，比如便于 Redux 开发的 Redux Devtoos 增强器，在有其他增强器出现的情况下，再用这种方法就显得很不方便了，所以上面介绍的第一种方法现在很少使用了，取而代之的是第二种方法

15. 第二种方法也就是把 applyMiddleware 的结果当做 Store Enhancer，和其他 Enhancer 混合之后作为 createStore 参数传入

16.createStore 最多可以接受三个参数，第一个参数是 reducer，第二个参数如果是对象，就会被认为是创建 Store 饿初始状态，这样第三个参数如果存在就是增强器。但如果第二个参数是函数类型，那就认为没有初始状态，直接把第二个参数当做增强器处理。

17. 值得一提的是，使用这种方法应用中间件的时候，一定要把 applyMiddleware 的结果来作为 compose 的第一个参数，也就是要放在所有其他 Store Enhancer 之前应用

18. 理解中间件饿最好办法就是自己开发一个中间件

19. 开发一个 Redux 中间件，首先要明确这个中间件的目的，因为中间件可以组合使用，所以不要让一个中间件的内容太过于臃肿，尽量让一个中间件只完成一个功能，通过中间件的组合来完成丰富的功能

20. 每个中间件必须是独立存在的，但是要考虑到其他中间件的存在

21. 所谓独立存在，指的是中间件不依赖于和其他中间件的顺序，也就是不应该要求其他中间件必须出现在它前面或者后面，否则事情会复杂化

22. 所谓考虑到其他中间件的存在，指的是每个中间件都要假设应用可能包含多个中间件，尊重其他中间件可能存在的事实。当发现传入的 action 对象不是自己感兴趣的类型，或者对 action 对象已经完成必要处理的时候，要通过调用 next（action）将 action 对象交回给中间件管道，让下一个中间件有机会来完成自己的工作，千万不能不明不白地丢弃一个 action 对象，这样处理“管道”就断了

23. 对于异步动作中间件，等于是要“吞噬”掉某些类型的 action 对象，这样的 action 对象不会交还给管道，不过，中间件会异步产生新的 action 对象，这时候不能够通过 next 函数将 action 对象还给管道了，因为 next 不会让 action 被所有中间件处理，而是从当前中间件之后的“管道”位置开始被处理

24. 一个中间件如果产生了新的 action 对象，正确的方式是使用 dispatch 函数派发，而不是使用 next 函数

25. 中间件可以用来增强 Redux Store 的 dispatch 方法，但也仅限于 dispatch 方法，也就是从 dispatch 函数调用到 action 对象被 reducer 处理这个过程中的操作，如果想要对 Redux Store 进行更深层次的增强定制，就需要使用 Store Enhancer。

26. 在前面的章节我们看到，applyMiddleware 函数的返回值被作为增强器传入 createStore，所以其实中间件功能就是利用增强器来实现的，毕竟定制 dispatch 只是 Store Enhancer 所能带来的改进可能之一，利用 Store Enhancer 可以增强 Redux Store 的各个方面

27.Redux 提供的创建 Store 的函数叫 createStore，这个函数除了可以接受 reducer 和初始状态（preloadedState）参数，还可以接受一个 Store Enhancer 作为参数，Store Enhancer 是一个函数，这个函数接受一个 createStore 模样的函数为参数，返回一个新的 createStore 函数。

28. 上面的例子中，最里层的函数体可以拿到一个 createStore 函数对象还有应该传递给这个 createStore 函数对象的三个参数，所以，基本的套路就是利用所给的参数创造出一个 store 对象，然后定制 store 对象，最后把 store 对象返回去就可以

29. 实现一个 Store Enhancer，功夫全在于如何定制产生的 store 对象，一个 store 对象中包含下列接口
A:dispatch
B:subscribe
C:getState
D:replaceReducer

30. 增强器通常都使用这样的模式，将 store 上某个函数的引用存下来，给这个函数一个新的实现，但是在完成增强功能之后，还是要调用原有的函数，保持原有的功能。在上例中，我们想要增强 dispatch 函数，先把 store.dispatch 的实现存在 originalDispatch 变量中，这样在新的 dispatch 函数中就可以调用，保证不破坏 Redux Store 的默认功能了。

31.Redux 的 store 上有一个 replaceReducer 函数，可以帮助我们完成替换 reducer 的工作，但是 store 只有 getState，可并没有 replaceReducer。Redux 这样设计就是杜绝对 state 的直接修改，我们都知道改变一个 Redux Store 状态的只能通过 reducer，而驱动 reducer 就要派发一个 action 对象

32.Store Enhancer 的功能比中间件更加强大，它完全可以定制一个 store 对象的所有接口，我们通过一个增强器实例演示了重置 store 上 reducer 和状态的功能

观后感回放：

粉丝路人甲：“太感人了，你不多陪陪儿子吗，今天少写一篇不要紧的”
锵哥：“要教会儿子坚持，那自己必须做到坚持”
粉丝路人甲：“嗯，原来如此！”

广告：

本人从事全栈工程师，目前主要工作能力涵盖的范围有：android，ios，h5，pcWeb，react，vue，node，java 服务端，微信服务号，微信小程序，支付宝生活号，支付宝小程序。

本公众号会不定期的将自己的研发感悟，以及心得笔记无私奉献给大家。还等啥，赶快上车吧，铁子们！！！????（还会有其他的福利哦！快来吧）

官方订阅号：锵哥的觉悟
微信号：DY_suixincq
二维码：