redux、react-redux、middleware原理及使用

什麼是Redux？

Redux 是 JavaScript 狀態（state）管理工具。即Redux不單單適用於React.js，還適用於Angular.js、Backbone.js等框架和庫。本文只介紹Redux在React.js中的使用。本文只是我的學習Redux的總結，只是我的理解，不必定百分百準確！讀者能夠對照 Redux中文文檔 或者查看Redux的源碼。

Redux原理

使用redux從建立store開始，經過createStore(rootReducer, [iniState])建立全局惟一的store，用於統一管理state tree。store建立好之後，view組件經過store.getState()能夠獲取state tree。若是須要修改state tree ，必須調用store.dispatch(action)觸發action（action中能夠攜帶操做數據），action觸發後，對應的reducer會處理action並返回更新後的state tree。這就是redux的工做原理！

react-redux原理

初學者常常搞不清楚redux和react-redux，例如：Provider是屬於redux仍是react-redux的組件？connect()呢？剛開始我也搞不清楚，直到看了redux的源碼之後，總算記住了。redux只對外暴露了如下幾個方法，用排除法，其餘的都不是redux的方法！其實，react-redux是redux對react的官方綁定庫（Official React bindings for Redux），藉助react-redux能夠很方便的在react中使用redux。

// redux/lib/src/index.js

export {
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose,
  __DO_NOT_USE__ActionTypes
}
複製代碼

下面是react-redux的原理，僅供參考！

react-redux提供一個叫Provider的組件，用於將store注入須要使用store的組件

// 省略其餘代碼...

ReactDOM.render(
  <Provider store={store}> <App /> </Provider>,
  document.getElementById('root')
);
複製代碼

提供connect()方法爲須要使用store的組件，綁定state tree和dispatch()方法。

// 省略其餘代碼...

const mapStateToProps = (state, ownProps) => ({
  active: ownProps.filter === state.visibilityFilter
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

複製代碼

react-redux的使用分爲三步：

1. 經過createStore()方法建立store；

2. 經過Provider組件將store注入到須要使用store的組件中；

3. 經過connect()鏈接UI組件和容器組件，從而更新state和dispatch(action)。

中間件原理

引入中間件，是由於redux自己不支持異步的action，因此你不能dispatch異步的action（例如：dispatch一個包含ajax請求結果的action）。redux提供一個高階函數ApplyMiddleware()，該函數能夠將action一級級傳遞給每個中間件，因爲遵循必定的規範，每一箇中間件能夠處理action並返回新的action，最後一箇中間件處理完action纔會傳遞給reducer作出響應。中間件有點像攔截器，看下圖就明白了（圖片來源）。

看過redux源碼的都知道，redux的源碼短小精悍，有許多精妙之處。compose()和applyMiddleware()就是個很好的例子，必須拿出來溜溜~~

• compose()源碼

// 執行compose(f, g, h) 至關於 (...args) => f(g(h(...args)))
// 將args按順序注入到每一個函數中，達到一級級傳遞參數的目的
export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
複製代碼

• applyMiddleware()源碼

// 將每一箇中間件，按順序compose到一塊兒
export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
        'Dispatching while constructing your middleware is not allowed. ' +
          'Other middleware would not be applied to this dispatch.'
      )
    }

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    // 讓每一箇中間件函數攜帶 middlewareAPI 執行一遍，讓每一箇中間件均可以getState和dispatch
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}
複製代碼

如何使用中間件?

以redux-thunk和redux-logger中間件爲例，使用createStore()建立中間件時，傳入applyMiddleware()，具體看代碼。

// src/store.js/js

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk' // 中間件
import { createLogger } from 'redux-logger' // 中間件
import rootReducer from '../reducers'

const loggerMiddleware = createLogger()

export default function configureStore(preloadedState) {
  return createStore(
    rootReducer,
    preloadedState,
    applyMiddleware(
      thunkMiddleware,
      loggerMiddleware
    )
  )
}
複製代碼

// src/index.js

import configureStore from './store/index'
const store = configureStore()

ReactDOM.render(
  <Provider store={store}> <App /> </Provider>,
  document.getElementById('root')
);
複製代碼

使用中間件之後，就能夠建立異步的action了

// src/action/index.js

export const REQUEST_POSTS = 'REQUEST_POSTS'
export const RECEIVE_POSTS = 'RECEIVE_POSTS'

function requestPosts(data) {
  return {
    type: REQUEST_POSTS,
    data
  }
}

function receivePosts(json) {
  return {
    type: RECEIVE_POSTS,
    posts: json.result || []
  }
}

function fetchPosts(data) {
  return dispatch => {
    dispatch(requestPosts(data))
    return fetch(`/Joke/NewstImg?key=6b1d549be2a445229921b884c26fad81&page=2&rows=10`)
      .then(res => res.json())
      .then(json => dispatch(receivePosts(json)))
  }
}

export const getJokeList = data => {
  return (dispatch, getState) => {
    return dispatch(fetchPosts(data))
  }
}
複製代碼

在reducer中，處理對應的action

// src/reducer/jokes.js

import {
  REQUEST_POSTS,
  RECEIVE_POSTS
} from '../actions'

const jokes = (state = { posts: [] }, action) => {

  switch (action.type) {
    case REQUEST_POSTS:
      return Object.assign({}, state, {
        isFetching: true
      })
    case RECEIVE_POSTS:
      return Object.assign({}, state, {
        isFetching: false,
        posts: action.posts
      })
    default:
      return state
  }
}

export default jokes
複製代碼

在UI組件中觸發action

// src/components/JokeList.js

import React, { Component } from 'react'
import { getJokeList } from '../actions'
import { connect } from 'react-redux'

class Jokes extends Component {
  componentDidMount() {
    const { dispatch } = this.props
    dispatch(getJokeList()) // 在這裏dispatch一個action，通過中間件處理後，最終傳給reducer，從而更改state，而後刷新UI
  }

  render() {
    const { posts = [] } = this.props
    console.log('render', posts)
    return (
      <div> <h3>幽默笑話</h3> { posts.map(item => { return <div> <p key={item.hashId}>{item.content}</p> {item.url ? <p><img src={item.url} alt="" /></p> : ''} </div> }) } </div> ) } } function mapStateToProps(state) { const { jokes: { posts = [] } } = state console.log('mapStateToProps-posts', posts) return { posts } } export default connect(mapStateToProps)(Jokes) 複製代碼

這就是中間件的用法！

總結

• redux 是個狀態管理庫；
• react-redux是redux官方爲react寫的一個綁定庫，讓react能夠使用redux；
• applyMiddleware() 是爲了加強redux的功能，讓它支持middleware（中間件）；
• redux-thunk是一個middleware（中間件），是異步action的解決方案之一，同類middleware還有redux-saga,redux-promise。

本文完