Redux框架之applyMiddleware()讲解

applyMiddleware()

• 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。它会返回一个应用了 middleware 的新的 createStore。

示例

自定义 Logger Middleware

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

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

    // 调用 middleware 链中下一个 middleware 的 dispatch。
    let returnValue = next(action)

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

    // 通常会是 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'

// 调用 applyMiddleware，使用 middleware 加强 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。
// 可是，他们只表达「事实」，并不表达「异步数据流」

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 调用，或者是路由跳转？

// 来看一下 thunk。
// Thunk 就是一个返回函数的函数。
// 下面就是一个 thunk。

function makeASandwichWithSecretSauce(forPerson) {

  // 控制反转！
  // 返回一个接收 `dispatch` 的函数。
  // Thunk middleware 知道如何把异步的 thunk action 转为普通 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')
)

// 它甚至负责回传 thunk 被 dispatch 后返回的值，
// 因此能够继续串连 Promise，调用它的 .then() 方法。

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

// 实际上，能够写一个 dispatch 其它 action creator 里
// 普通 action 和异步 action 的 action creator，
// 并且可使用 Promise 来控制数据流。

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

      // 返回 Promise 并非必须的，但这是一个很好的约定，
      // 为了让调用者可以在异步的 dispatch 结果上直接调用 .then() 方法。

      return Promise.resolve()
    }

    // 能够 dispatch 普通 action 对象和其它 thunk，
    // 这样咱们就能够在一个数据流中组合多个异步 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')
      )
    )
  }
}

// 这在服务端渲染时颇有用，由于我能够等到数据
// 准备好后，同步的渲染应用。

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

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

// 也能够在任何致使组件的 props 变化的时刻
// dispatch 一个异步 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)
复制代码

总结

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

• 若是除了 applyMiddleware，你还用了其它 store enhancer，必定要把 applyMiddleware 放到组合链的前面，由于 middleware 可能会包含异步操做。好比，它应该在 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)
复制代码

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

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

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

更多文章

• 做者React Native开源项目OneM【500+ star】地址(按照企业开发标准搭建框架完成开发的)：github.com/guangqiang-…：欢迎小伙伴们 star
• 做者简书主页：包含60多篇RN开发相关的技术文章www.jianshu.com/u/023338566… 欢迎小伙伴们：多多关注，多多点赞
• 做者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也按期更新最新的RN学习资料给你们，谢谢你们支持！

欢迎小伙伴们扫描下方二维码加入RN技术交流QQ群(500人+)