摘要：原文地址沒想到這篇文章這么晚才出，最近發(fā)生了太多的事情，已致于心態(tài)全無，最終也離開了現(xiàn)在的公司，沒想到是這么的狼狽一個人的光芒可以放到很大也可以小到微乎其微，如果不能好好的規(guī)劃最終也只能默默的承受世上沒有相同的感同身受，感受真實才能真正的

原文地址：https://gmiam.com/post/react-...

沒想到這篇文章這么晚才出，最近發(fā)生了太多的事情，已致于心態(tài)全無，最終也離開了現(xiàn)在的公司，沒想到是這么的狼狽

一個人的光芒可以放到很大也可以小到微乎其微，如果不能好好的規(guī)劃最終也只能默默的承受

世上沒有相同的感同身受，感受真實才能真正的認清一切

好了，下面步入正題

前面看到 Flux 架構相對來說還是比較繁瑣，同時社區(qū)也涌現(xiàn)了很多第三方的框架模式，而 Redux 則脫穎而出

React 以組件的形式維護了一顆 UI 樹，但是對狀態(tài)數(shù)據(jù)沒有做更多的處理，Redux 則把狀態(tài)數(shù)據(jù)也抽象成了一棵樹來維護

它本身與 React 沒有直接關系，可以與其他框架配合使用，也可以很好的與 React 配合使用

Redux 的代碼量非常短小，核心只提供了 5 個 API

createStore

combineReducers

bindActionCreators

applyMiddleware

compose

下面先來直觀的感受下 Redux

import { createStore } from "redux";

function counter(state = 0, action) {
  switch (action.type) {
  case "INCREMENT":
    return state + 1;
  case "DECREMENT":
    return state - 1;
  default:
    return state;
  }
}

let store = createStore(counter);

store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch({ type: "INCREMENT" });
// 1
store.dispatch({ type: "INCREMENT" });
// 2
store.dispatch({ type: "DECREMENT" });
// 1

表象可以看出入口是 createStore，接收一個函數(shù)（這里叫做 reducer），這個函數(shù)接收 state 與 action 倆個參數(shù)，然后 dispatch 一個對象（這里叫 action ,要包含一個 type 屬性標明行為），reducer 函數(shù)就會被觸發(fā)執(zhí)行來操作狀態(tài)，同時也會觸發(fā) subscribe 訂閱的回調，回調可以通過 store.getState() 獲取當前狀態(tài)數(shù)據(jù)

到這里都很簡單，那么如果我們需要處理的數(shù)據(jù)和狀態(tài)越來越多 reducer 函數(shù)就會越來越大導致難以維護，所以 Redux 提供了 combineReducers 來處理這種情況，它把這個大的 reducer 分解成一個個小的 reducer ，每個小 reducer 維護自己的狀態(tài)數(shù)據(jù)，這樣就分解出了一個狀態(tài)樹

做下變種

reducers/todos.js

export default function todos(state = [], action) {
  switch (action.type) {
  case "ADD_TODO":
    return state.concat([action.text])
  default:
    return state
  }
}

reducers/counter.js

export default function counter(state = 0, action) {
  switch (action.type) {
  case "INCREMENT":
    return state + 1
  case "DECREMENT":
    return state - 1
  default:
    return state
  }
}

reducers/index.js

import { combineReducers } from "redux"
import todos from "./todos"
import counter from "./counter"

export default combineReducers({
  todos,
  counter
})

App.js

import { createStore } from "redux"
import reducer from "./reducers/index"

let store = createStore(reducer)
console.log(store.getState())
// {
//   counter: 0,
//   todos: []
// }

store.dispatch({
  type: "ADD_TODO",
  text: "Use Redux"
})
console.log(store.getState())
// {
//   counter: 0,
//   todos: [ "Use Redux" ]
// }

可以看到我們利用 combineReducers 把 reducer 做了拆分，combineReducers 部分精簡源碼

export default function combineReducers(reducers) {
  var reducerKeys = Object.keys(reducers)
  var finalReducers = {}
  for (var i = 0; i < reducerKeys.length; i++) {
    var key = reducerKeys[i]
    if (typeof reducers[key] === "function") {
      finalReducers[key] = reducers[key]
    }
  }
  var finalReducerKeys = Object.keys(finalReducers)

  return function combination(state = {}, action) {

    var hasChanged = false
    var nextState = {}
    for (var i = 0; i < finalReducerKeys.length; i++) {
      var key = finalReducerKeys[i]
      var reducer = finalReducers[key]
      var previousStateForKey = state[key]
      var nextStateForKey = reducer(previousStateForKey, action)
      nextState[key] = nextStateForKey
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    return hasChanged ? nextState : state
  }
}

可以看到就是把對象中的 reducer 全部執(zhí)行一遍，把上次的狀態(tài)傳入進去，最新的狀態(tài)返回回來，當然你也可以提供自己的

combineReducers 方法

前面我們注意到 store.dispatch 都是一個純對象，也就是說我們的觸發(fā)都是同步的，如何支持異步？

下面我們來引入 Redux 中間件來增強下

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers/index";

function increment() {
  return {
    type: "INCREMENT_COUNTER"
  }
}

function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      dispatch(increment());
    }, 1000)
  }
}

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
)

store.dispatch(increment()) // 同步

store.dispatch(incrementAsync()) // 異步

同步方式的觸發(fā)跟以前是一樣的，這里的異步支持就是靠 Redux 的 applyMiddleware 中間件模式與 thunk 中間件做增強支持的

來看下 applyMiddleware 與部分 createStore 源碼

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer)
    var dispatch = store.dispatch
    var chain = []

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

export default function createStore(reducer, preloadedState, enhancer) {
  if (typeof preloadedState === "function" && typeof enhancer === "undefined") {
    enhancer = preloadedState
    preloadedState = undefined
  }

  if (typeof enhancer !== "undefined") {
    return enhancer(createStore)(reducer, preloadedState)
  }
  
  ....

  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }
}

createStore 里所謂的增強就是 applyMiddleware 一些中間件，

const store = createStore( rootReducer, applyMiddleware(thunk) )

與下面寫法是等效的

const store = applyMiddleware(thunk)(createStore)(rootReducer)

看上面 applyMiddleware 的源碼可以知道會先用 createStore 創(chuàng)建原始 store，然后把 getState 與 dispatch 傳給中間件，中間件處理完后返回擴展后的 store

看下 thunk 中間件源碼

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === "function") {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

很簡單傳入 dispatch, getState 后返回 next => action = > {...}，然后傳入 store.dispatch 返回 action => {...} 即擴展后的 dispatch

這個新的 dispatch 也是接受 action，如果是對象用原始 store.dispatch 直接觸發(fā)，如果是函數(shù)則把 dispatch 傳進函數(shù)體，把控制權交給函數(shù)內部

注意后面執(zhí)行用到的 dispatch 已是擴展后的能處理函數(shù)的 dispatch

回過頭來在說下 compose API，applyMiddleware 可以接受一系列中間件，內部調用 compose 來做處理

compose(...chain) 等同于 (...args) => f(g(h(...args)))

也就是說傳入一組函數(shù)，它會倒序執(zhí)行，把前一個的執(zhí)行結果傳給下一個，達到漸進增強效果

說到這里 Redux 和 它的 API 終于介紹差不多了，至于 bindActionCreators 后面介紹

說了這么多可以看到 Redux 自己就可以跑，那如何與 React 結合起來？那就需要 react-redux 這個中間橋梁了

react-redux 提供了倆個 API

Provider store

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

Provider 就是一個 React 組件，它接收一個 store 屬性，把 store 掛在 React 的 Context 上，這樣它的子組件不需要顯示的傳遞 store 就可以獲取到

看個例子

import { Provider } from "react-redux"

const store = createStore(reducer)

render(
  
    
  ,
  document.getElementById("root")
)

那么問題來了，可以獲取到 store 后呢，如何做交互以及 React 與 Redux 的溝通，這時候 connect API 就派上用場了

還是繼續(xù)看個例子

import { bindActionCreators } from "redux"

const App = ({todos, actions}) => (
  

    

    
  
)

const mapStateToProps = state => ({
  todos: state.todos
})

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(TodoActions, dispatch)
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

connect 的源碼執(zhí)行大概是這樣

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {

    return function wrapWithConnect(WrappedComponent) {

        class Connect extends Component {

            constructor(props, context) {
              this.store = props.store || context.store
            }

            render() {

               const mappedState = mapStateToProps(store.getState(), this.props)
               const mappedDispatch = mapDispatchToProps(store.dispatch, this.props)

               const mergedProps = {
                 mappedState,
                 mappedDispatch
               }

               this.renderedElement = createElement(WrappedComponent,mergedProps)
               return this.renderedElement
            }
        }
    }
}

這里做了適當?shù)暮喕?，從這可以看出 connect 返回了一個 Connect 組件獲取到 store，然后把 store.getState() 與 store.dispatch

傳遞給我們的 mapStateToProps 與 mapDispatchToProps 函數(shù)，返回相應的數(shù)據(jù)與方法通過 props 傳遞給 React 組件，這樣 React 組件就可以獲取到相應數(shù)據(jù)展示，同時也可以通過 dispatch 觸發(fā) Redux store 的數(shù)據(jù)變動，Connect 組件在根據(jù)數(shù)據(jù)對比看是否需要重新渲染~

connect 實際的代碼比這復雜的多，內部做了細致的淺數(shù)據(jù)對比以提升性能

對于 react-redux 這里還有一個潛規(guī)則，那就是展示組件與容器組件相分離，就是說只有容器組件處理數(shù)據(jù)與狀態(tài)與 Redux 溝通，

展示組件只做正常的 UI 渲染，可以從這里了解更多 http://redux.js.org/docs/basi...

再看下上面的

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(TodoActions, dispatch)
})

會把傳入的函數(shù)或對象的每一個方法做下面的變形

function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args))
}

這樣 React 組件調用對應的 action 時就可以 dispatch 這個 actionCreator 產生的數(shù)據(jù)

最終不管有沒有明白都可以看下 https://github.com/reactjs/re...

這個例子來加深下理解，以及目錄結構的分工，當然有興趣多了解一些例子就更好了

呼，這篇到這里終于算是寫完了，最后大家都加油吧！