使用applyMiddleware

本小节我们将学会如何使用applayMiddleware

1、使用applayMiddleware

在前两个小节我们已经向大家介绍了异步actionCreator和异步中间件，这一小节我们可以做进一步的尝试。

applayMiddleware函数接受这样的参数

applyMiddleware(thunkMiddleware,middleware1,middleware2,...)(createStore);

它返回一个新的createStore函数，接下来你会发现，原来使用起来和同步没有多大区别

const finalCreateStore = applyMiddleware(thunkMiddleware,logMiddleware)(createStore);
const store_ = finalCreateStore(todoApp);
var unsubscribe =store_.subscribe(()=>{
  console.log(new Date());
  console.log(store_.getState());
})
store_.dispatch(addTodo('actionCreator'));
store_.dispatch(asyncActionCreator('asyncActionCreator'));

2、进一步学习applyMiddleware函数

大家可能会好奇applyMiddleware到底做了什么呢？

applyMiddleware函数其实就是将一个拓展的dispatch返回给我们。这个dispatch能干嘛呢？

我们可以简单的测试一下我们的applyMiddleware函数。我将打印action和打印时间的中间件分别放在异步中间件的左右

const finalCreateStore = applyMiddleware(logActionMiddleware,thunkMiddleware,logMiddleware)(createStore);
const store_ = finalCreateStore(todoApp);
store_.dispatch(addTodo('actionCreator'));
store_.dispatch(asyncActionCreator('asyncActionCreator'));

看我们得到了什么。

开始我们使用普通action，可以看到我们先打印出了action，后打印出时间。

在异步的时候我们发现，他先打印出异步的action函数，然后呢，我等了五秒，可以看到又打印了action和时间（dispatch在五秒后被调用）。

3、为什么会这样？？？我们结合下面的图来讲。

图片右边展示的是我们dispatch普通action时发生的，经过不同的中间件，将中间件函数业务代码叠加，最后通过dispatch执行所有中间件的业务代码

左边则是展示的异步action，他只会触发异步中间件之前的中间件，而后进入到action函数中，不会再经过异步中间件后的next

现在大家应该就能明白，为什么我们打印了action函数却没有打印时间了，没错，就是因为进入了异步action因此没有经过后面打印时间的中间件。

你可以在右方代码区测试异步todo，并打开控制台查看效果。