欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Redux和React-Redux的实现(三):中间件的原理和applyMiddleware、Thunk的实现

程序员文章站 2022-03-10 19:10:32
现在我们的Redux和React Redux已经基本实现了,在Redux中,触发一个action,reducer立即就能算出相应的state,如果我要过一会才让reducer计算state呢怎么办?也就是我们如何实现异步的action呢?这里就要用到中间件(middleware) 1. 中间件(mi ......

现在我们的Redux和React-Redux已经基本实现了,在Redux中,触发一个action,reducer立即就能算出相应的state,如果我要过一会才让reducer计算state呢怎么办?也就是我们如何实现异步的action呢?这里就要用到中间件(middleware)

1. 中间件(middleware)介绍

中间就是在action与reducer之间又加了一层,没有中间件的Redux的过程是:action -> reducer,而有了中间件的过程就是action -> middleware -> reducer,使用中间件我们可以对action也就是对dispatch方法进行装饰,我们可以用它来实现异步action、打印日志、错误报告等功能。

又是装饰器,没错,这块的好多东西都离不开装饰器模式,所以,设计模式很重要。

关于中间件,有很多框架或者是类库都使用了中间件,像express、koa、mongoose等都有使用。

2. Redux中间件的使用

我们可以使用Redux提供的applyMiddleware方法来使用一个或者是多个中间件,将它作为createStore的第二个参数传入即可,我们以Redux-Thunk为例

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

const store = createStore(counter, applyMiddleware(thunk))
ReactDOM.render(
  (
    <Provider store={store}>
      <App />
    </Provider>
  ),
  document.getElementById('root')
)

通过thunk中间件,我们就可以实现异步的action了。

export function addAsync(){
  return dispatch => {
    setTimeout(() => {
      dispatch(add())
    }, 2000);
  }
}

想要实现中间件,我们首先有两个任务要做:

扩展createStore方法,使它可以接收第二个参数。

applyMiddleware方法的实现。

3. createStore方法的扩展

我们在createStore中加入第二个参数enhancer, 专业的解释应该叫增强器,叫middleware也可以的。

我们已经说过中间件的作用就是通过改变dispatch方法来改变数据流,所以我们这里直接用enhancer对createStore方法进行装饰。Redux的源码也是这么写的,哈哈哈哈,怎么和我想到的一模一样呢?因为我看了Redux的源码。。

export function createStore (reducer,enhancer) {
  if (enhancer) {
    return enhancer(createStore)(reducer)
  }
  let state = {}
  let listeners = []

  function getState () {
    return state
  }
  function subscribe (listener) {
    listeners.push(listener)
  }
  function dispatch (action) {
    state = reducer(state, action)
    listeners.forEach(listener => listener())
    return action
  }

  dispatch({type: '@myRedux'})
  return {getState, subscribe, dispatch}
}

高阶函数的写法,应该都能看懂了吧?前几篇随笔有详细的讲高阶函数,还有例子。

4.applyMiddleware方法的实现

先看我们上边对enhancer的调用,enhancer也就是我们的applyMiddleware接受了createStore做参数,返回了一个函数,这个函数的参数是reducer。现在我们对这种两层嵌套的函数已经不陌生了,其实它就是一个return两层的函数。

我们的applyMiddleware主要做了什么呢?首先通过传入的createStore方法create了一个store,然后将store的dispatch传递给middleware,由middleware对dispatch进行包装,返回一个带有被包装的dispatch的store。

看到这里,很简单嘛。但是注意,还记得我们是怎么使用异步的action的吗?

export function addAsync(){
  return (dispatch, getState) => {
    setTimeout(() => {
      dispatch(add())
    }, 2000);
  }
}

居然还可以在可以在异步的action中拿到dispatch和getState方法,所以要对这个进行处理,也不是很难,把他俩传给我们的middle就好了。

都说到这里了,能不能自己写出来呢?

export function applyMiddleware (middleware){
    return createStore => (...args) => {
        const store = createStore(...args)
        let dispatch = store.dispatch

        const midApi = {
            getState: store.getState,
            dispatch: (...args)=>dispatch(...args)
        }
        dispatch = middleware(midApi)(store.dispatch)
        return {
            ...store,
            dispatch
        }
    }
}

如果我们执行了被包装后的dispatch,就相当于执行了middleware(midApi)(store.dispatch)(action)这段语句,这是一个三层的嵌套函数,我们也称作柯里化。

5.自己的redux-thunk

其实自己的thunk很简单,正常的action的的返回值是个对象,前面已经说过,异步的action的返回值是一个函数,那么我们只需要判断一下action的返回的类型即可。

const thunk = ({dispatch, getState}) => next => action => {
    if (typeof action === 'function') {
        return action(dispatch, getState)
    }
    return next(action)
}

export thunk

在这里呢,dispatch和getState就是我们在applyMiddleware中传入的那个midApi对象,next就是store.dispatch也可以理解为下一个中间件,如果action的类型是object,说明这是一个同步的,直接dispatch就好了,如果
action的类型是function,当触发这个dispatch的时候,就触发action这个函数,同时将dispatch和getState方法传入到action函数中,这也是为什么我们能在异步action中拿到dispatch和getState方法的原因。

6.多个中间件合并与compose方法

我们的applyMiddle方法还不是太完善,只能使用一个中间件,使用多个中间件怎么办,这个,简单,map一下呗。如果是要求多个中间件依此执行怎么办?还是map呀,好,来map一下。

我们会得到这样的代码:

const store = createStore(
    reducer,
    applyMiddleware(middlewareOne) (
        middlewareTwo(
          middlewareThree(
              ...
          )
        )
    )
)

我们会发现,我们陷入了一个深度嵌套的函数当中,这时我们就需要一个compose方法来结合一下,方便我们的书写。

compose是函数式编程的一种写法,compose的作用是从右到左结合多个函数,形成一个最终函数。就是将fn1(fn2(fn3()))的形式,变成compose(fn1, fn2, fn3)的形式。

compose 做的只是让你在写深度嵌套的函数时,避免了代码的向右偏移。不要觉得它很复杂。

compose方法的实现:

export function compose (...funcs){
    if (funcs.length==0) {
        return arg=>arg
    }
    if (funcs.length==1) {
        return funcs[0]
    }
    return funcs.reduce((ret,item)=> (...args)=>{
                console.log(ret)
       return ret(item(...args))
      })
}

compose不是那么复杂,关于如果想了解更多关于compose的知识,可以看看Redux对compose的说明

到这里我们可以使用多个中间件的applyMiddleware方法已经实现了,整个的applyMiddleware方法在这里:

export function applyMiddleware (...middlewares){
    return createStore=>(...args)=>{
        const store = createStore(...args)
        let dispatch = store.dispatch

        const midApi = {
            getState:store.getState,
            dispatch:(...args)=>dispatch(...args)
        }
        const middlewareChain = middlewares.map(middleware=>{
            return middleware(midApi)
        })
        console.log(compose(...middlewareChain)(store.dispatch))
        dispatch = compose(...middlewareChain)(store.dispatch)
        return {
            ...store,
            dispatch
        }
    }
}
export function compose(...funcs){
    if (funcs.length==0) {
        return arg=>arg
    }
    if (funcs.length==1) {
        return funcs[0]
    }
    return funcs.reduce((ret,item)=> (...args)=>{
                console.log(ret)
       return ret(item(...args))
      })
}

到这里,整个Redux和React-Redux的基本原理我们已经清楚了,也已经基本实现了,发现其中涉及到很多函数式编程和装饰者模式,还有一次观察者模式,所以,编程思想和设计模式是很重要的,有时间一定要加强这方面的学习。

我们现在有了这些基础,可以去看看Redux和React-Redux的源码,也大体上和我写的是差不多的,因为我也看了源码。