关于javascript:redux工作中常用的的中间件

工作中罕用的的中间件

redux-thunk

这个就是就是咱们实现的thunk中间件，应用形式是一样的

1. 下载中间件

npm install redux-thunk

2. 引入中间件、并注册中间件

import thunk from 'redux-thunk'import { applyMiddleware } from 'redux'export const store = createStore(RootReducer, applyMiddleware(thunk))

当初就能够欢快的应用了

redux-saga

用redux-saga来实现计数器延期性能

与redux-thunk性能统一，但比redux-thunk跟弱小，redux-saga能够将异步操作从Action Creator 文件抽离进去，放在一个独自的文件中，这样咱们我的项目代码更加可保护了

takeEvery: 用来接管action，第一个参数时要接管的action类型字符串，第二个参数是执行的异步办法

put: 用来触发一个action 与dispatch 办法统一

要求咱们默认导出一个generator函数

1. 下载 redux-saga

npm install redux-saga

2. 创立 redux-saga 中间件

import createSagaMiddleware form 'redux-saga'const sagaMiddleware = createSagaMiddleware()createStore(RootReducer, applyMiddleware(sagaMiddleware))

3. 创立异步操作action

export const increment_async = () => ({type: INCREMENT_ASYNC})

4. 应用saga 拦挡异步操作的action，期待异步操作实现之后执行同步更改的action

import  { takeEvery, put, delay } from 'redux-saga/effects'import { increment } from '../actions/counter.actions'import { INCREMENT_ASYNC } from '../const/counter.const'function* increment_async_fn () {    yield delay(2000)    yield put(increment(10))}export default function* counterSage () {    yield takeEvery(INCREMENT_ASYNC, increment_async_fn)}

5. 启动saga

import createSagaMiddleware from 'redux-saga'import counterSage from './sagas/counter.sagas'const sagaMiddleware = createSagaMiddleware()export const store = createStore(RootReducer, applyMiddleware(sagaMiddleware))// 执行这个办法必须要在createStore之后sagaMiddleware.run(counterSage)

redux-saga中的action传参

1. 视图中传入参数

<button onClick={() => increment_async(30)}>+</button>

2. 在action中承受参数并增加到action中

export const increment_async = payload => ({type: INCREMENT_ASYNC, payload})

3. 在saga中间件中接管参数并传递给执行更改操作的action

function* increment_async_fn (action) {    console.log(action)    yield delay(2000)    yield put(increment(action.payload))}

saga文件的拆分与合并

应用saga来提早显示和暗藏弹出框案例

1. 创立异步action，并把action.type定义为常量

export const show_async = () => ({type: SHOWMODAL_ASYNC})// 定义常量export const SHOWMODAL_ASYNC = 'showModal_async'

2. 在saga中拦挡异步aciton，执行异步操作后触发同步更改action

import  { takeEvery, put, delay } from 'redux-saga/effects'import { show } from '../actions/modal.actions'import { SHOWMODAL_ASYNC } from '../const/modal.const'function* showModal_async_fn (){    yield delay(2000)    yield put(show())}export default function* counterSage () {    yield takeEvery(SHOWMODAL_ASYNC, showModal_async_fn)}

3. 视图中去触发异步action

// function Modal ({ show_async }) {} <button onClick={show_async}>显示</button>

咱们发现这个saga文件中即接管了弹出框的异步action 又接管了计数器异步action，这样过多的异步操作之后代码变得臃肿无奈保护，所以咱们须要去拆分合并saga

合并saga

咱们合并saga须要用到all办法，all办法接管一个数组参数，这个数组的成员即是咱们拆散的saga的调用

1. 创立src/store/sagas/modal.sagas.js 文件，把弹出框的代码抽离到以后这个文件

import  { takeEvery, put, delay } from 'redux-saga/effects'import { show } from '../actions/modal.actions'import { SHOWMODAL_ASYNC } from '../const/modal.const'function* showModal_async_fn (){    yield delay(2000)    yield put(show())}export default function* modalSaga (){    yield takeEvery(SHOWMODAL_ASYNC, showModal_async_fn)}

2. 创立src/store/sagas/root.saga.js文件，导入创立的saga文件合并一起

import { all } from 'redux-saga/effects'import counterSaga from './counter.sagas'import modalSaga from './modal.sagas'export default function* rootSaga() {    yield all([        counterSaga(),        modalSaga()    ])}

3. 更改运行saga传入为rootsaga

import rootSaga from './sagas/root.saga'const sagaMiddleware = createSagaMiddleware()export const store = createStore(RootReducer, applyMiddleware(sagaMiddleware))// 执行这个办法必须要在createStore之后sagaMiddleware.run(rootSaga)

### redux-actions中间件

Redux-actions帮忙咱们简化了action代码和reducer代码、

redux流程中大量的样板代码读写狠苦楚，应用redux-actions能够简化aciton和reducer的解决

下载redux-actions

npm install redux-actions

创立action

createAction接管一个字符串作为参数，这个字符串就是action对象外面的type值， 返回值就是本人定义的

actionCreate 函数，触发和接管action的时候咱们只须要应用createAction的返回值就能够了，就不须要把type值设置为常量了

import { createAction } from 'redux-actions'const increment_action = createAction('increment')const decrement_action = createAction('decrement')

创立reducer

createReducer 接管两个参数，第一个参数是一个对象，对象的key就是用createAction 创立的 action，对象的value就是执行action的操作

第二个参数就是初始值

import { handleActions as createReducer } from 'redux-actions'import { increment_action, decrement_action} from '../actions/counter.action'const initialState = {count: 0}const counterReducer = createReducer({  [increment_action]: (state, action) => ({count: state.count + 1}),             [decrement_action]: (state, action) => ({count: state.count + 1})}, initialState)export default counterReducer

用redux-actions 来实现计数器案例

1. 用redux-actions创立action

import { createAction } from 'redux-actions'export const increment = createAction('increment')export const decrement = createAction('decrement')

2. 用redux-actions创立reducer

import { increment, decrement } from './../actions/counter.actions'import { handleActions as createReducer } from 'redux-actions'const initialState = {    count: 0}const handIncrement = (state, action) =>({count: state.count + 1})const handDecrement = (state, action) =>({count: state.count - 1})export default createReducer({    [increment]: handIncrement,    [decrement]: handDecrement}, initialState)

3. 传递参数在视图中传递，间接在reducer中接管

// 视图function Count({count,increment,decrement}) {    return <div>        <button onClick={() => increment(10)}>+</button>        <span>{count}</span>        <button onClick={() => decrement(20)}>-</button>    </div>}// reducer 中const handIncrement = (state, action) =>({count: state.count + action.payload})const handDecrement = (state, action) =>({count: state.count - action.payload})

原文地址: https://kspf.xyz/archives/22/