关于javascript:redux中间件

43次阅读

共计 3261 个字符,预计需要花费 9 分钟才能阅读完成。

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-export
export 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.js
export default store => next => action => {console.log('test 中间件')
    next(action)
}
// src/store/index.js

import {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.js
import {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.js
export 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/

正文完
 0