• applyMiddleware(...middlewares)
    • 参数
    • 返回值
    • 示例: 自定义 Logger Middleware
    • 示例: 使用 Thunk Middleware 来做异步 Action
    • 小贴士

    applyMiddleware(...middlewares)

    使用包含自定义功能的 middleware 来扩展 Redux 是一种推荐的方式。Middleware 可以让你包装 store 的 dispatch 方法来达到你想要的目的。同时， middleware 还拥有“可组合”这一关键特性。多个 middleware 可以被组合到一起使用，形成 middleware 链。其中，每个 middleware 都不需要关心链中它前后的 middleware 的任何信息。

    Middleware 最常见的使用场景是无需引用大量代码或依赖类似 Rx 的第三方库实现异步 actions。这种方式可以让你像 dispatch 一般的 actions 那样 dispatch 异步 actions。

    例如，redux-thunk 支持 dispatch function，以此让 action creator 控制反转。被 dispatch 的 function 会接收 dispatch 作为参数，并且可以异步调用它。这类的 function 就称为 thunk。另一个 middleware 的示例是 redux-promise。它支持 dispatch 一个异步的 Promise action，并且在 Promise resolve 后可以 dispatch 一个普通的 action。

    Middleware 并不需要和 createStore 绑在一起使用，也不是 Redux 架构的基础组成部分，但它带来的益处让我们认为有必要在 Redux 核心中包含对它的支持。因此，虽然不同的 middleware 可能在易用性和用法上有所不同，它仍被作为扩展 dispatch 的唯一标准的方式。

    参数

    • ...middlewares (arguments): 遵循 Redux middleware API 的函数。每个 middleware 接受 Store 的 dispatch 和 getState 函数作为命名参数，并返回一个函数。该函数会被传入
      被称为 next 的下一个 middleware 的 dispatch 方法，并返回一个接收 action 的新函数，这个函数可以直接调用 next(action)，或者在其他需要的时刻调用，甚至根本不去调用它。调用链中最后一个 middleware 会接受真实的 store 的 dispatch 方法作为 next 参数，并借此结束调用链。所以，middleware 的函数签名是 ({ getState, dispatch }) => next => action。

    返回值

    (Function) 一个应用了 middleware 后的 store enhancer。这个 store enhancer 的签名是 createStore => createStore，但是最简单的使用方法就是直接作为最后一个 enhancer 参数传递给 createStore() 函数。

    示例: 自定义 Logger Middleware

    1. import { createStore, applyMiddleware } from 'redux'
    2. import todos from './reducers'
    4. function logger({ getState }) {
    5.   return (next) => (action) => {
    6.     console.log('will dispatch', action)
    8.     // 调用 middleware 链中下一个 middleware 的 dispatch。
    9.     let returnValue = next(action)
    11.     console.log('state after dispatch', getState())
    13.     // 一般会是 action 本身，除非
    14.     // 后面的 middleware 修改了它。
    15.     return returnValue
    16.   }
    17. }
    19. let store = createStore(
    20.   todos,
    21.   [ 'Use Redux' ],
    22.   applyMiddleware(logger)
    23. )
    25. store.dispatch({
    26.   type: 'ADD_TODO',
    27.   text: 'Understand the middleware'
    28. })
    29. // (将打印如下信息:)
    30. // will dispatch: { type: 'ADD_TODO', text: 'Understand the middleware' }
    31. // state after dispatch: [ 'Use Redux', 'Understand the middleware' ]

    示例: 使用 Thunk Middleware 来做异步 Action

    1. import { createStore, combineReducers, applyMiddleware } from 'redux'
    2. import thunk from 'redux-thunk'
    3. import * as reducers from './reducers'
    5. let reducer = combineReducers(reducers)
    6. // applyMiddleware 为 createStore 注入了 middleware:
    7. let store = createStore(reducer, applyMiddleware(thunk))
    9. function fetchSecretSauce() {
    10.   return fetch('https://www.google.com/search?q=secret+sauce')
    11. }
    13. // 这些是你已熟悉的普通 action creator。
    14. // 它们返回的 action 不需要任何 middleware 就能被 dispatch。
    15. // 但是，他们只表达「事实」，并不表达「异步数据流」
    17. function makeASandwich(forPerson, secretSauce) {
    18.   return {
    19.     type: 'MAKE_SANDWICH',
    20.     forPerson,
    21.     secretSauce
    22.   }
    23. }
    25. function apologize(fromPerson, toPerson, error) {
    26.   return {
    27.     type: 'APOLOGIZE',
    28.     fromPerson,
    29.     toPerson,
    30.     error
    31.   }
    32. }
    34. function withdrawMoney(amount) {
    35.   return {
    36.     type: 'WITHDRAW',
    37.     amount
    38.   }
    39. }
    41. // 即使不使用 middleware，你也可以 dispatch action：
    42. store.dispatch(withdrawMoney(100))
    44. // 但是怎样处理异步 action 呢，
    45. // 比如 API 调用，或者是路由跳转？
    47. // 来看一下 thunk。
    48. // Thunk 就是一个返回函数的函数。
    49. // 下面就是一个 thunk。
    51. function makeASandwichWithSecretSauce(forPerson) {
    53.   // 控制反转！
    54.   // 返回一个接收 `dispatch` 的函数。
    55.   // Thunk middleware 知道如何把异步的 thunk action 转为普通 action。
    57.   return function (dispatch) {
    58.     return fetchSecretSauce().then(
    59.       sauce => dispatch(makeASandwich(forPerson, sauce)),
    60.       error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    61.     )
    62.   }
    63. }
    65. // Thunk middleware 可以让我们像 dispatch 普通 action
    66. // 一样 dispatch 异步的 thunk action。
    68. store.dispatch(
    69.   makeASandwichWithSecretSauce('Me')
    70. )
    72. // 它甚至负责回传 thunk 被 dispatch 后返回的值，
    73. // 所以可以继续串连 Promise，调用它的 .then() 方法。
    75. store.dispatch(
    76.   makeASandwichWithSecretSauce('My wife')
    77. ).then(() => {
    78.   console.log('Done!')
    79. })
    81. // 实际上，可以写一个 dispatch 其它 action creator 里
    82. // 普通 action 和异步 action 的 action creator，
    83. // 而且可以使用 Promise 来控制数据流。
    85. function makeSandwichesForEverybody() {
    86.   return function (dispatch, getState) {
    87.     if (!getState().sandwiches.isShopOpen) {
    89.       // 返回 Promise 并不是必须的，但这是一个很好的约定，
    90.       // 为了让调用者能够在异步的 dispatch 结果上直接调用 .then() 方法。
    92.       return Promise.resolve()
    93.     }
    95.     // 可以 dispatch 普通 action 对象和其它 thunk，
    96.     // 这样我们就可以在一个数据流中组合多个异步 action。
    98.     return dispatch(
    99.       makeASandwichWithSecretSauce('My Grandma')
    100.     ).then(() =>
    101.       Promise.all([
    102.         dispatch(makeASandwichWithSecretSauce('Me')),
    103.         dispatch(makeASandwichWithSecretSauce('My wife'))
    104.       ])
    105.     ).then(() =>
    106.       dispatch(makeASandwichWithSecretSauce('Our kids'))
    107.     ).then(() =>
    108.       dispatch(getState().myMoney > 42 ?
    109.         withdrawMoney(42) :
    110.         apologize('Me', 'The Sandwich Shop')
    111.       )
    112.     )
    113.   }
    114. }
    116. // 这在服务端渲染时很有用，因为我可以等到数据
    117. // 准备好后，同步的渲染应用。
    119. import { renderToString } from 'react-dom/server'
    121. store.dispatch(
    122.   makeSandwichesForEverybody()
    123. ).then(() =>
    124.   response.send(renderToString(<MyApp store={store} />))
    125. )
    127. // 也可以在任何导致组件的 props 变化的时刻
    128. // dispatch 一个异步 thunk action。
    130. import { connect } from 'react-redux'
    131. import { Component } from 'react'
    133. class SandwichShop extends Component {
    134.   componentDidMount() {
    135.     this.props.dispatch(
    136.       makeASandwichWithSecretSauce(this.props.forPerson)
    137.     )
    138.   }
    140.   componentWillReceiveProps(nextProps) {
    141.     if (nextProps.forPerson !== this.props.forPerson) {
    142.       this.props.dispatch(
    143.         makeASandwichWithSecretSauce(nextProps.forPerson)
    144.       )
    145.     }
    146.   }
    148.   render() {
    149.     return <p>{this.props.sandwiches.join('mustard')}</p>
    150.   }
    151. }
    153. export default connect(
    154.   state => ({
    155.     sandwiches: state.sandwiches
    156.   })
    157. )(SandwichShop)

    小贴士

    • Middleware 只是包装了 store 的 dispatch 方法。技术上讲，任何 middleware 能做的事情，都可能通过手动包装 dispatch 调用来实现，但是放在同一个地方统一管理会使整个项目的扩展变的容易得多。

    • 如果除了 applyMiddleware，你还用了其它 store enhancer，一定要把 applyMiddleware 放到组合链的前面，因为 middleware 可能会包含异步操作。比如，它应该在 redux-devtools 前面，否则 DevTools 就看不到 Promise middleware 里 dispatch 的 action 了。

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

      1. let middleware = [ a, b ]
      2. if (process.env.NODE_ENV !== 'production') {
      3.   let c = require('some-debug-middleware')
      4.   let d = require('another-debug-middleware')
      5.   middleware = [ ...middleware, c, d ]
      6. }
      8. const store = createStore(
      9.   reducer,
      10.   preloadedState,
      11.   applyMiddleware(...middleware)
      12. )

      这样做有利于打包时去掉不需要的模块，减小打包文件大小。

    • 有想过 applyMiddleware 本质是什么吗？它肯定是比 middleware 还强大的扩展机制。实际上，applyMiddleware 只是被称为 Redux 最强大的扩展机制的 store enhancer 中的一个范例而已。你不太可能需要实现自己的 store enhancer。另一个 store enhancer 示例是 redux-devtools。Middleware 并没有 store enhancer 强大，但开发起来却是更容易的。

    • Middleware 听起来比实际难一些。真正理解 middleware 的唯一办法是了解现有的 middleware 是如何工作的，并尝试自己实现。需要的功能可能错综复杂，但是你会发现大部分 middleware 实际上很小，只有 10 行左右，是通过对它们的组合使用来达到最终的目的。

    • 想要使用多个 store enhancer，可以使用 compose() 方法。