中间件
Time:2019-08-19
中间件的概念
从服务端角度来看，比如Express和Koa这些框架，中间件是可以放在收到请求和产生响应之间的代码。
中间件的最好的性质是，它们可以组合成为链式，因此我们可以在单个对象上使用多个第三方的中间件。
回到redux这里来，中间件解决的问题不同，但是概念上是相似的。
中间件是在分发行为和行为到达
reducers之间的第三方扩展。
异步action.png
一般来说，我们选择中间件是为了：
- 日志
- 软件崩溃报告
- 与异步API通信
- 路由
等等。
这个概念可以用这么简短的话语描述完毕，但是距离掌握还需要多次练习。
上图中，异步fetch是定义在action creator里面的，store分发同步action和异步action的方式没有区别，有redux-thunk这类中间件加持，程序就知道如何处理异步action了。
涉及到的需要深挖的知识点：
- Promise
- fetch的异步处理
理解中间件
通过两个案例来理解：
- 日志
- 程序崩溃报告
第一个案例：日志
方式一：手动日志
最朴素的分发行为的方式是：store.dispatch(action)，此时就是记录分发行为的时机。
实际上，在使用了react-redux后，我们不会在组件中直接获取store实例，store实例只会在<Provider>标签中出现，通过上下文让全局知晓。无论是容器组件还是傻瓜组件，都不会直接使用store实例。
分发的行为确实发生在容器组件中，语法如下：
const mapDispatchToProps = dispatch => ({
ListBlacklist: () => dispatch(ListBlacklist()),
ShowAllLoanRequests: () => dispatch(ShowAllLoanRequests()),
VerifyCredentialHash: () => dispatch(VerifyCredentialHash()),
QueryMultiPartyLoan: () => dispatch(QueryMultiPartyLoan()),
QueryMalRecords: () => dispatch(QueryMalRecords())
})
相当于将分发的函数封装到传递给props中的函数，将触发state更新的句柄交到了组件手里。
现在为了理解中间件，我们先只关注直接通过store.dispatch(action)的方式。
store.dispatch(addTodo('Use Redux'))
为了手工记录分发了哪些行为，我们用下面的代码来记录：
const action = addTodo('Use Redux') // addTodo是行为创建函数
console.log('dispatching', action) // 输出分发的行为
store.dispatch(action) // 真实分发行为
console.log('next state', store.getState()) // 输出当前新的state的状态
这个逻辑确实是okay的，但是呢，每次分发都这样来一波，不是很好的实践方式。
方式二：封装分发函数
将日志记录代码抽象为函数，
function dispatchAndLog(store, action) {
console.log('dispatching', action)
store.dispatch(action)
console.log('next state', store.getState())
}
然后在需要分发函数的地方，分发时记录日志，调用函数即可：
dispatchAndLog(store, addTodo('Use Redux'))
这种也只是演示内在逻辑的方式，真实情况下肯定不会这么用，因为这个函数每个地方都得导入一遍，并不方便。
方式三：重载store.dispatch()
上面的问题是，我们需要每次都导入dispatchAndLog函数才能使用分发并记录。
我们可以直接修改store.dispatch()函数的定义：
const next = store.dispatch
store.dispatch = function dispatchAndLog(action) {
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}
这样，我们在调用store.dispatch时，都会有日志记录~~
感觉并不是很合适，但是对于完成功能是足够的了。
第二个案例：程序崩溃报告
TBD
