关于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/