Redux框架之a(chǎn)pplyMiddleware()用法講解

applyMiddleware()

  • applyMiddleware(...middlewares)

  • 使用包含自定義功能的 middleware 來擴(kuò)展 Redux 是一種推薦的方式。Middleware 可以讓你包裝 store 的 dispatch 方法來達(dá)到你想要的目的。同時(shí)， middleware 還擁有“可組合”這一關(guān)鍵特性。多個(gè) middleware 可以被組合到一起使用，形成 middleware 鏈。其中，每個(gè) middleware 都不需要關(guān)心鏈中它前后的 middleware 的任何信息。

  • Middleware 最常見的使用場(chǎng)景是無需引用大量代碼或依賴類似 Rx 的第三方庫實(shí)現(xiàn)異步 actions。這種方式可以讓你像 dispatch 一般的 actions 那樣 dispatch 異步 actions。

  • 例如，redux-thunk 支持 dispatch function，以此讓 action creator 控制反轉(zhuǎn)。被 dispatch 的 function 會(huì)接收 dispatch 作為參數(shù)，并且可以異步調(diào)用它。這類的 function 就稱為 thunk。另一個(gè) middleware 的示例是 redux-promise。它支持 dispatch 一個(gè)異步的 Promise action，并且在 Promise resolve 后可以 dispatch 一個(gè)普通的 action。

  • Middleware 并不需要和 createStore 綁在一起使用，也不是 Redux 架構(gòu)的基礎(chǔ)組成部分，但它帶來的益處讓我們認(rèn)為有必要在 Redux 核心中包含對(duì)它的支持。因此，雖然不同的 middleware 可能在易用性和用法上有所不同，它仍被作為擴(kuò)展 dispatch 的唯一標(biāo)準(zhǔn)的方式。

參數(shù)

  • ...middlewares (arguments): 遵循 Redux middleware API 的函數(shù)。每個(gè) middleware 接受 Store 的 dispatch 和 getState 函數(shù)作為命名參數(shù)，并返回一個(gè)函數(shù)。該函數(shù)會(huì)被傳入 被稱為 next 的下一個(gè) middleware 的 dispatch 方法，并返回一個(gè)接收 action 的新函數(shù)，這個(gè)函數(shù)可以直接調(diào)用 next(action)，或者在其他需要的時(shí)刻調(diào)用，甚至根本不去調(diào)用它。調(diào)用鏈中最后一個(gè) middleware 會(huì)接受真實(shí)的 store 的 dispatch 方法作為 next 參數(shù)，并借此結(jié)束調(diào)用鏈。所以，middleware 的函數(shù)簽名是 ({ getState, dispatch }) => next => action。

返回值

  • (Function) 一個(gè)應(yīng)用了 middleware 后的 store enhancer。這個(gè) store enhancer 就是一個(gè)函數(shù)，并且需要應(yīng)用到 createStore。它會(huì)返回一個(gè)應(yīng)用了 middleware 的新的 createStore。

示例

自定義 Logger Middleware

import { createStore, applyMiddleware } from 'redux'
import todos from './reducers'

function logger({ getState }) {
  return (next) => (action) => {
    console.log('will dispatch', action)

    // 調(diào)用 middleware 鏈中下一個(gè) middleware 的 dispatch。
    let returnValue = next(action)

    console.log('state after dispatch', getState())

    // 一般會(huì)是 action 本身，除非
    // 后面的 middleware 修改了它。
    return returnValue
  }
}

let createStoreWithMiddleware = applyMiddleware(logger)(createStore)
let store = createStoreWithMiddleware(todos, [ 'Use Redux' ])

store.dispatch({
  type: 'ADD_TODO',
  text: 'Understand the middleware'
})
// (將打印如下信息:)
// will dispatch: { type: 'ADD_TODO', text: 'Understand the middleware' }
// state after dispatch: [ 'Use Redux', 'Understand the middleware' ]

使用 Thunk Middleware 來做異步 Action

import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import * as reducers from './reducers'

// 調(diào)用 applyMiddleware，使用 middleware 增強(qiáng) createStore：
let createStoreWithMiddleware = applyMiddleware(thunk)(createStore)

// 像原生 createStore 一樣使用。
let reducer = combineReducers(reducers)
let store = createStoreWithMiddleware(reducer)

function fetchSecretSauce() {
  return fetch('https://www.google.com/search?q=secret+sauce')
}

// 這些是你已熟悉的普通 action creator。
// 它們返回的 action 不需要任何 middleware 就能被 dispatch。
// 但是，他們只表達(dá)「事實(shí)」，并不表達(dá)「異步數(shù)據(jù)流」

function makeASandwich(forPerson, secretSauce) {
  return {
    type: 'MAKE_SANDWICH',
    forPerson,
    secretSauce
  }
}

function apologize(fromPerson, toPerson, error) {
  return {
    type: 'APOLOGIZE',
    fromPerson,
    toPerson,
    error
  }
}

function withdrawMoney(amount) {
  return {
    type: 'WITHDRAW',
    amount
  }
}

// 即使不使用 middleware，你也可以 dispatch action：
store.dispatch(withdrawMoney(100))

// 但是怎樣處理異步 action 呢，
// 比如 API 調(diào)用，或者是路由跳轉(zhuǎn)？

// 來看一下 thunk。
// Thunk 就是一個(gè)返回函數(shù)的函數(shù)。
// 下面就是一個(gè) thunk。

function makeASandwichWithSecretSauce(forPerson) {

  // 控制反轉(zhuǎn)！
  // 返回一個(gè)接收 `dispatch` 的函數(shù)。
  // Thunk middleware 知道如何把異步的 thunk action 轉(zhuǎn)為普通 action。

  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    )
  }
}

// Thunk middleware 可以讓我們像 dispatch 普通 action
// 一樣 dispatch 異步的 thunk action。

store.dispatch(
  makeASandwichWithSecretSauce('Me')
)

// 它甚至負(fù)責(zé)回傳 thunk 被 dispatch 后返回的值，
// 所以可以繼續(xù)串連 Promise，調(diào)用它的 .then() 方法。

store.dispatch(
  makeASandwichWithSecretSauce('My wife')
).then(() => {
  console.log('Done!')
})

// 實(shí)際上，可以寫一個(gè) dispatch 其它 action creator 里
// 普通 action 和異步 action 的 action creator，
// 而且可以使用 Promise 來控制數(shù)據(jù)流。

function makeSandwichesForEverybody() {
  return function (dispatch, getState) {
    if (!getState().sandwiches.isShopOpen) {

      // 返回 Promise 并不是必須的，但這是一個(gè)很好的約定，
      // 為了讓調(diào)用者能夠在異步的 dispatch 結(jié)果上直接調(diào)用 .then() 方法。

      return Promise.resolve()
    }

    // 可以 dispatch 普通 action 對(duì)象和其它 thunk，
    // 這樣我們就可以在一個(gè)數(shù)據(jù)流中組合多個(gè)異步 action。

    return dispatch(
      makeASandwichWithSecretSauce('My Grandma')
    ).then(() =>
      Promise.all([
        dispatch(makeASandwichWithSecretSauce('Me')),
        dispatch(makeASandwichWithSecretSauce('My wife'))
      ])
    ).then(() =>
      dispatch(makeASandwichWithSecretSauce('Our kids'))
    ).then(() =>
      dispatch(getState().myMoney > 42 ?
        withdrawMoney(42) :
        apologize('Me', 'The Sandwich Shop')
      )
    )
  }
}

// 這在服務(wù)端渲染時(shí)很有用，因?yàn)槲铱梢缘鹊綌?shù)據(jù)
// 準(zhǔn)備好后，同步的渲染應(yīng)用。

import { renderToString } from 'react-dom/server'

store.dispatch(
  makeSandwichesForEverybody()
).then(() =>
  response.send(renderToString(<MyApp store={store} />))
)

// 也可以在任何導(dǎo)致組件的 props 變化的時(shí)刻
// dispatch 一個(gè)異步 thunk action。

import { connect } from 'react-redux'
import { Component } from 'react'

class SandwichShop extends Component {
  componentDidMount() {
    this.props.dispatch(
      makeASandwichWithSecretSauce(this.props.forPerson)
    )
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.forPerson !== this.props.forPerson) {
      this.props.dispatch(
        makeASandwichWithSecretSauce(nextProps.forPerson)
      )
    }
  }

  render() {
    return <p>{this.props.sandwiches.join('mustard')}</p>
  }
}

export default connect(
  state => ({
    sandwiches: state.sandwiches
  })
)(SandwichShop)

總結(jié)

  • Middleware 只是包裝了 store 的 dispatch 方法。技術(shù)上講，任何 middleware 能做的事情，都可能通過手動(dòng)包裝 dispatch 調(diào)用來實(shí)現(xiàn)，但是放在同一個(gè)地方統(tǒng)一管理會(huì)使整個(gè)項(xiàng)目的擴(kuò)展變的容易得多。

  • 如果除了 applyMiddleware，你還用了其它 store enhancer，一定要把 applyMiddleware 放到組合鏈的前面，因?yàn)?middleware 可能會(huì)包含異步操作。比如，它應(yīng)該在 redux-devtools 前面，否則 DevTools 就看不到 Promise middleware 里 dispatch 的 action 了。

  • 如果你想有條件地使用 middleware，記住只 import 需要的部分：

let middleware = [ a, b ]
if (process.env.NODE_ENV !== 'production') {
  let c = require('some-debug-middleware')
  let d = require('another-debug-middleware')
  middleware = [ ...middleware, c, d ]
}
const createStoreWithMiddleware = applyMiddleware(...middleware)(createStore)

這樣做有利于打包時(shí)去掉不需要的模塊，減小打包文件大小。

  • 有想過 applyMiddleware 本質(zhì)是什么嗎？它肯定是比 middleware 還強(qiáng)大的擴(kuò)展機(jī)制。實(shí)際上，applyMiddleware 只是被稱為 Redux 最強(qiáng)大的擴(kuò)展機(jī)制的 store enhancers 中的一個(gè)范例而已。你不太可能需要實(shí)現(xiàn)自己的 store enhancer。另一個(gè) store enhancer 示例是 redux-devtools。Middleware 并沒有 store enhancer 強(qiáng)大，但開發(fā)起來卻是更容易的。

  • Middleware 聽起來比實(shí)際難一些。真正理解 middleware 的唯一辦法是了解現(xiàn)有的 middleware 是如何工作的，并嘗試自己實(shí)現(xiàn)。需要的功能可能錯(cuò)綜復(fù)雜，但是你會(huì)發(fā)現(xiàn)大部分 middleware 實(shí)際上很小，只有 10 行左右，是通過對(duì)它們的組合使用來達(dá)到最終的目的。

福利時(shí)間

  • 作者React Native開源項(xiàng)目OneM地址(按照企業(yè)開發(fā)標(biāo)準(zhǔn)搭建框架設(shè)計(jì)開發(fā))：https://github.com/guangqiang-liu/OneM (歡迎小伙伴們 star)
  • 作者簡(jiǎn)書主頁：包含50多篇RN開發(fā)相關(guān)的技術(shù)文章http://www.itdecent.cn/u/023338566ca5 (歡迎小伙伴們：多多關(guān)注，多多點(diǎn)贊)
  • 作者React Native QQ技術(shù)交流群：620792950 歡迎小伙伴進(jìn)群交流學(xué)習(xí)
  • 友情提示：在開發(fā)中有遇到RN相關(guān)的技術(shù)問題，歡迎小伙伴加入交流群（620792950），在群里提問、互相交流學(xué)習(xí)。交流群也定期更新最新的RN學(xué)習(xí)資料給大家，謝謝支持！
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • http://gaearon.github.io/redux/index.html ，文檔在 http://rac...
    jacobbubu閱讀 80,415評(píng)論 35贊 198
  • 一、什么情況需要redux？ 1、用戶的使用方式復(fù)雜 2、不同身份的用戶有不同的使用方式（比如普通用戶和管...
    初晨的筆記閱讀 2,132評(píng)論 0贊 11
  • 前言 本文 有配套視頻，可以酌情觀看。 文中內(nèi)容因各人理解不同，可能會(huì)有所偏差，歡迎朋友們聯(lián)系我討論。 文中所有內(nèi)...
    珍此良辰閱讀 12,189評(píng)論 23贊 111
  • 看到標(biāo)題，也許您會(huì)覺得奇怪，redux跟Koa以及Express并不是同一類別的框架，干嘛要拿來做類比。盡管，例如...
    Perkin_閱讀 1,808評(píng)論 0贊 4
  • 為什么dispatch需要middleware 上圖表達(dá)的是 redux 中一個(gè)簡(jiǎn)單的同步數(shù)據(jù)流動(dòng)的場(chǎng)景，點(diǎn)擊 b...
    一個(gè)胖子的我閱讀 2,124評(píng)論 1贊 9

友情鏈接更多精彩內(nèi)容