1 分钟带你入门 Redux 中间件

import {createStore, combineReducers, compose, applyMiddleware} from 'redux'
// 合并reducer
const rootReducer = combineReducers({
    counter,
    lister
})
// compose 合并function
const enhancerCompose = (...arg) => {
    if (window.__REDUX_DEVTOOLS_EXTENSION__) {
        arg.unshift(window.__REDUX_DEVTOOLS_EXTENSION__()) // redux-devtools工具
    }
    return compose(...arg)
}
// applyMiddleware 中间件合并工具
const store = createStore(rootReducer, initalState, enhancerCompose(applyMiddleware()))

... 接上文
// middleWare one by one
function sleep(){...}
// 中间件a
const a = store => next => async action => {
    console.log('a start')
    await sleep(1000)
    console.log('a end')
    return next(action)
}
// 中间b
const b = store => next => action => {
    console.log('b')
    return next(action)
}
const store = createStore(rootReducer, initalState, enhancerCompose(applyMiddleware(a,b)))
// 触发dispatch时
store.dispatch(...)
// 控制台输出:
// console.log ==> a start
// 1000ms later
// console.log ==> a end
// console.log ==> b
               ...
                   

...
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import rootSaga from './sagas'
...
const reducer = (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1
        case 'DECREMENT':
            return state  - 1
        default:
            return state
    }
}
const sagaMiddleware = createSagaMiddleware() // 创建sagaMiddleware
const store = createStore(reducer, applyMiddleware(sagaMiddleware)) // 注入store
sagaMiddleware.run(rootSaga) // 让saga跑起来
...

import { put, takeEvery, all, takeLatest, takeLeading, takeMaybe } from 'redux-saga/effects'
const delay = (ms) => new Promise(res => setTimeout(res, ms))
function* helloSaga() {
  console.log('Hello Sagas!')
}
function* incrementAsync() {
  yield delay(1000)
  yield put({ type: 'INCREMENT' }) // 调用Reducer函数里面定义的INCREMENT
}
// 可以理解为声明了一个叫做INCREMENT_ASYNC的Action
function* watchIncrementAsync() {
  yield takeLeading('INCREMENT_ASYNC', incrementAsync)
}
// 合并 saga
export default function* rootSaga() {
  yield all([
    helloSaga(),
    watchIncrementAsync()
  ])
}

...
// 组件
function CounterCom() { ... }
// 将dispatch挂载至props
const mapDispatchToProps = dispatch => {
    const action = type => dispatch({type})
    return {
        onIncrement: () => action('INCREMENT'),
        onDecrement: () => action('DECREMENT'),
        onIncrementAsync: () => action('INCREMENT_ASYNC')
    }
}
// connect 
const Counter = connect(mapStateToProps, mapDispatchToProps)(CounterCom)