Redux 中间件

什么是中间件？

中间件实质上就是一个函数，Redux容许咱们通过中间件的形式，扩大和加强Redux应用程序，加强体现在对action解决能力上，之前的计数器与弹出框案例中。actions都是间接被reducer函数解决的，再退出了中间件当前，在登程了一个action之后这个action会优先被中间件解决，当两头解决完这个action当前，中间件会把这个action传递给reducer，让reducer持续解决

退出了中间件Redux 工作流程

开发Redux 中间件

开发中间件模版代码，实质上是一个函数，并且是一个科里化的一个函数

export default store => next => action => {}

这个函数中要求咱们返回一个函数，在这个返回的函数中要求咱们再返回一个函数，在最里层的函数中咱们能够执行咱们本人的业务逻辑，在最外层的函数中给咱们提供了一个参数叫store，能够用store.getState获取以后state状态，也能够应用store.dispatch来触发另外一个action，至于干什么具体依据应用的业务逻辑来决定。在最里层的函数也有一个形参，这个形参就是组件触发的action对象，能够依据action.type来决定是否对以后action进行解决。两头的函数也有一个参数，这个参数是一个函数，咱们称之为next，在咱们执行完了逻辑代码之后，咱们要去调用next办法，把以后action 传递给reducer，或者说传递给下一个中间件，因为中间件能够有多个。中间件开发好之后须要引入咱们写的中间件并且注册给redux。

注册中间件

import { createStore, applyMiddleware } from 'redux'import logger from './middlewares/logger'createStore(reducer, applyMiddleware(    logger))

开发一个中间件

实现一个打印每次action操作的中间件

  1. 新建 src/store/middleware/logger.js 文件，在这个文件中导出一个中间件咱们这里打印上
// eslint-disable-next-line import/no-anonymous-default-exportexport default store => next => action => {    console.log(store.getState())    console.log(action)    // next 必须调用  并且必须传第 action    next(action)}
  1. 在store/index.js 中注册中间件
import logger from './middleware/logger'import { applyMiddleware } from 'redux'export const store = createStore(RootReducer, applyMiddleware(logger))

这个时候中间件就能够应用了，运行我的项目能够看到中间件曾经开始工作了，单个中间件曾经注册好了，那么多个中间件怎么注册呢，多个中间件的运行程序又是怎么样的呢，多个中间件就是在applyMiddleware的多个参数

  1. 咱们新建 src/store/middleware/test.js 文件 注册另一个中间件这个test中间件打印一句话，并在store/index.js来注册中间件，并替换注册程序来查看中间件执行程序
//src/store/middleware/test.jsexport default store => next => action => {    console.log('test 中间件')    next(action)}// src/store/index.jsimport { createStore } from 'redux';import RootReducer from './reducers/root.reducers'import { applyMiddleware } from 'redux'import logger from './middleware/logger'import test from './middleware/test'export const store = createStore(RootReducer, applyMiddleware(test  ,logger))

从上能够看出中间件的执行程序就是注册程序

通过中间件开发实例thunk

计数器新需要

点击+-按钮的时候延时2秒再执行

思路：在中间件拦挡 加减操作的 action 等到事件到了之后再执行next办法

  1. 新建src/store/middleware/thunk.js 中间件，在这个中间件中拦挡 +- 操作的action 提早两秒再执行next办法，并在store/index.js文件中注册这个中间件
// src/store/middleware/thunk.jsimport { INCREMENT, DECREMENT } from './../const/counter.const'export default store => next => action => {      if (action.type === INCREMENT || action.type === DECREMENT) {        setTimeout(() => {            next(action)        }, 2000)    }else{        next(action)    }}// src/store/index.js  注册中间件import thunk from './middleware/thunk'export const store = createStore(RootReducer, applyMiddleware(test, logger, thunk))

这里尽管能够实现这个提早执行这个性能，然而代码还不够灵便。中间件只关注是异步还是同步操作这样代码就灵便多了

  1. 革新中间件

    1. 当这个中间件函数不关怀你想执行什么异步操作，只关怀你执行的是不是异步操作
    2. 如果你执行的是异步操作，再你触发action的时候，给中间件传递一个函数，如果执行的是同步操作就传递一个失常action对象
    3. 异步操作代码要写在传递进来的函数中
    4. 以后这个中间件的函数在点用你传递进来的函数时，要将dispatch办法传递进去
import { INCREMENT, DECREMENT } from './../const/counter.const'export default store => next => action => {    if (typeof action === 'function') {        return  action(store.dispatch)    }    next(action)}
  1. 在action中去新减少异步函数,并在视图中绑定事件的时候绑定异步函数
// src/store/actions/counter.actions.jsexport const increment_async = payload => dispatch => {    setTimeout(() => {        dispatch(increment(payload))    }, 2000);}// src/components/Count.js视图中更改绑定的事件function Count({count,increment_async,decrement}) {    return <div>        <button onClick={() => increment_async(5)}>+</button>        <span>{count}</span>        <button onClick={() => decrement(5)}>-</button>    </div>}

这样咱们并序须要在中间件中做具体异步操作，只须要在中间件中判断是异步还是同步操作，异步操作时执行咱们传递进来的函数并传递 dispatch 给咱们传递的异步函数，在异步函数中执行异步操作，并去触发真正的action动作

原文地址：https://kspf.xyz/archives/20/