跳到主要内容

redux 中间件

redux 中间件

redux 单向数据流​

image.png

redux 中间件​

思考：为什么中间件只能在 dispatch 中改造?

image.png

  • reducer 是一个纯函数，无副作用
  • action 只是一个对象

image.png

dispatch 中间件可能会产生副作用，又会重新触发 action

Redux如何处理异步Action​

通过middleware机制，提供拦截器，在action传给reducer之前拦截并构建新的action给reducer

Redux通过redux-thunk中间件，发现接收到的action是一个函数，就不会传给Reducer，而是执行函数，并把dispatch作为参数传过去，在函数中随时使用发送action

使用示例​

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import createLogger from 'redux-logger'
import reducer from './reducer'


// 日志中间件
const logger = createLogger()

const store = createStore(
    reducer, 
    applyMiddleware(thunk, logger) // 按照顺序执行
)

redux-logger 源码


const next = store.dispatch

store.dispatch = function (action) {
    console.log('before logger', action)
    next(action)
    console.log('after logger', store.getState())
}