从函数的柯里化，看Redux中间件的实现

简介：同步请求时，dispatch（action）发出请求，到接受请求reducer(state，action)是同步的。如果当我们需要异步请求时，状态应该变为dispatch（action）——wait()——reducer（state，action）。处理异步的函数wait()，就是中间件的概念，也就是发出请求后，并不是同步马上执行的，引入中间件后：

dispatch(action)——中间件——reducer(state,action)

1.首先来看什么是函数的柯里化？

（1）柯里化是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

简单来说：我们要实现1,2,3,4的求和

function sum(x,y,z,q){
 return x+y+z+q;
}

sum(1,2,3,4);//得到10

我们从上可以看出，sum函数传递了4个参数，函数的柯里化，是指将函数的参数变为1个，并且返回新的函数，柯里化后：

function sum(x){

  return function(y){
     return function (z){
       return function(q){
         return x+y+z+q
       }
     }
  }
}

sum(1)(2)(3)(4) //得到sum为10

我们可以看出，函数柯里化后，每次调用只传递一个参数，并且每次调用后会返回新的函数。

（2）es6中，箭头函数下的函数柯里化

var sum=(x)=>(y)=>(z)=>(q)=>(x+y+z+q) 

等价于:

var sum=funstion(x){
   return function(y){
     return function(z){
       return function(q){
          return x+y+z+q
       }
     }
  }
}

sum(1)(2)(3)(4);//得到值为10

2.Redux中的applyMiddleware的实现原理：

function applyMiddleware(store, middlewares) {
  middlewares = middlewares.slice()
  middlewares.reverse()

  let dispatch = store.dispatch
  middlewares.forEach(middleware =>
    dispatch = middleware(store)(dispatch)
  )

  return Object.assign({}, store, { dispatch })
}

通过applyMiddleware引入中间件并且实现中间件，中间件的数组为middlewares。

（1）我们来看一下applyMiddleware的实现目的：

依次实现middlewares中的方法，并且对于每一个方法重新封装store.dispatch方法。

（2）applyMiddleware的实现原理：

 middlewares.forEach(middleware =>
    dispatch = middleware(store)(dispatch)
  )

这一句代码就是核心，我们发现，对于每一个中间件，首先执行这个中间件，并且对于每一个中间件，执行后重新定义dispatch方法。

3.Redux中，中间件的定义。

我们看到了applyMiddleware方法，是如何利用中间件，那么如何定义中间件呢，在applyMiddleware中，我们可以知道执行中间件的原理是为了依次封装dispatch方法。我们来看一个中间件的简单定义：

const logger = store => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}

这里的logger就是一个中间件，当我们调用applyMiddleware方法时：

applyMiddleware(store,[logger]);

会依次middlewares数组中的方法，并且每次执行都重新封装store.dispatch，函数柯里化在哪里体现呢？

 middlewares.forEach(middleware =>
    dispatch = middleware(store)(dispatch)
  )

这里体现了函数柯里化，每次执行一个中间件，middleware(store)(dispatch),第二个括号内的（dispatch），传递给了具体函数的next。