摘要：否則的話，認(rèn)為只是一個普通的，將通過也就是進(jìn)一步分發(fā)。在本組件內(nèi)的應(yīng)用傳遞給子組件源碼解析期待一個作為傳入，里面是如果只是傳入一個，則通過返回被綁定到的函數(shù)遍歷并通過分發(fā)綁定至將其聲明為的屬性之一接收的作為傳入。

原文鏈接：https://github.com/ecmadao/Co...
轉(zhuǎn)載請注明出處
本文不涉及redux的使用方法，因此可能更適合使用過redux的玩家翻閱?

redux 函數(shù)內(nèi)部包含了大量柯里化函數(shù)以及代碼組合思想

通俗的來講，可以用一句話概括柯里化函數(shù)：返回函數(shù)的函數(shù)

// example
const funcA = (a) => {
  return const funcB = (b) => {
    return a + b
  }
};

上述的funcA函數(shù)接收一個參數(shù)，并返回同樣接收一個參數(shù)的funcB函數(shù)。

柯里化函數(shù)有什么好處呢？

避免了給一個函數(shù)傳入大量的參數(shù)--我們可以通過柯里化來構(gòu)建類似上例的函數(shù)嵌套，將參數(shù)的代入分離開，更有利于調(diào)試

降低耦合度和代碼冗余，便于復(fù)用

舉個栗子：

// 已知listA, listB兩個Array，都由int組成，需要篩選出兩個Array的交集
const listA = [1, 2, 3, 4, 5];
const listB = [2, 3, 4];

const checkIfDataExist = (list) => {
  return (target) => {
    return list.some(value => value === target)
  };
};
// 調(diào)用一次checkIfDataExist函數(shù)，并將listA作為參數(shù)傳入，來構(gòu)建一個新的函數(shù)。
// 而新函數(shù)的作用則是：檢查傳入的參數(shù)是否存在于listA里
const ifDataExist = checkIfDataExist(listA);

// 使用新函數(shù)來對listB里的每一個元素進(jìn)行篩選
const intersectionList = listB.filter(value => ifDataExist(value));
console.log(intersectionList); // [2, 3, 4]

代碼組合就像是數(shù)學(xué)中的結(jié)合律：

const compose = (f, g) => {
  return (x) => {
    return f(g(x));
  };
};
// 還可以再簡潔點(diǎn)
const compose = (f, g) => (x) => f(g(x));

通過這樣函數(shù)之間的組合，可以大大增加可讀性，效果遠(yuǎn)大于嵌套一大堆的函數(shù)調(diào)用，并且我們可以隨意更改函數(shù)的調(diào)用順序

// 回顧一下combineReducers的使用格式

// 兩個reducer
const todos = (state = INIT.todos, action) => {
  // ....
};
const filterStatus = (state = INIT.filterStatus, action) => {
  // ...
};

const appReducer = combineReducers({
  todos,
  filterStatus
});

還記得combineReducers的黑魔法嗎？即：

傳入的Object參數(shù)中，對象的key與value所代表的reducer function同名

各個reducer function的名稱和需要傳入該reducer的state參數(shù)同名

源碼標(biāo)注解讀（省略部分）：

export default function combineReducers(reducers) {
  // 第一次篩選，參數(shù)reducers為Object
  // 篩選掉reducers中不是function的鍵值對
  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)

  // 二次篩選，判斷reducer中傳入的值是否合法（!== undefined）
  // 獲取篩選完之后的所有key
  var sanityError
  try {
    // assertReducerSanity函數(shù)用于遍歷finalReducers中的reducer，檢查傳入reducer的state是否合法
    assertReducerSanity(finalReducers)
  } catch (e) {
    sanityError = e
  }
  
  // 返回一個function。該方法接收state和action作為參數(shù)
  return function combination(state = {}, action) {
    // 如果之前的判斷reducers中有不法值，則拋出錯誤
    if (sanityError) {
      throw sanityError
    }
    // 如果不是production環(huán)境則拋出warning
    if (process.env.NODE_ENV !== "production") {
      var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action)
      if (warningMessage) {
        warning(warningMessage)
      }
    }

    var hasChanged = false
    var nextState = {}
    // 遍歷所有的key和reducer，分別將reducer對應(yīng)的key所代表的state，代入到reducer中進(jìn)行函數(shù)調(diào)用
    for (var i = 0; i < finalReducerKeys.length; i++) {
      var key = finalReducerKeys[i]
      var reducer = finalReducers[key]
      // 這也就是為什么說combineReducers黑魔法--要求傳入的Object參數(shù)中，reducer function的名稱和要和state同名的原因
      var previousStateForKey = state[key]
      var nextStateForKey = reducer(previousStateForKey, action)
      // 如果reducer返回undefined則拋出錯誤
      if (typeof nextStateForKey === "undefined") {
        var errorMessage = getUndefinedStateErrorMessage(key, action)
        throw new Error(errorMessage)
      }
      // 將reducer返回的值填入nextState
      nextState[key] = nextStateForKey
      // 如果任一state有更新則hasChanged為true
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    return hasChanged ? nextState : state
  }
}

// 檢查傳入reducer的state是否合法
function assertReducerSanity(reducers) {
  Object.keys(reducers).forEach(key => {
    var reducer = reducers[key]
    // 遍歷全部reducer，并給它傳入(undefined, action)
    // 當(dāng)?shù)谝粋€參數(shù)傳入undefined時，則為各個reducer定義的默認(rèn)參數(shù)
    var initialState = reducer(undefined, { type: ActionTypes.INIT })
    
    // ActionTypes.INIT幾乎不會被定義，所以會通過switch的default返回reducer的默認(rèn)參數(shù)。如果沒有指定默認(rèn)參數(shù)，則返回undefined，拋出錯誤
    if (typeof initialState === "undefined") {
      throw new Error(
        `Reducer "${key}" returned undefined during initialization. ` +
        `If the state passed to the reducer is undefined, you must ` +
        `explicitly return the initial state. The initial state may ` +
        `not be undefined.`
      )
    }

    var type = "@@redux/PROBE_UNKNOWN_ACTION_" + Math.random().toString(36).substring(7).split("").join(".")
    if (typeof reducer(undefined, { type }) === "undefined") {
      throw new Error(
        `Reducer "${key}" returned undefined when probed with a random type. ` +
        `Don"t try to handle ${ActionTypes.INIT} or other actions in "redux/*" ` +
        `namespace. They are considered private. Instead, you must return the ` +
        `current state for any unknown actions, unless it is undefined, ` +
        `in which case you must return the initial state, regardless of the ` +
        `action type. The initial state may not be undefined.`
      )
    }
  })
}

// 回顧下使用方法
const store = createStore(reducers, state, enhance);

源碼標(biāo)注解讀（省略部分）：

// 對于未知的action.type，reducer必須返回默認(rèn)的參數(shù)state。這個ActionTypes.INIT就可以用來監(jiān)測當(dāng)reducer傳入未知type的action時，返回的state是否合法
export var ActionTypes = {
  INIT: "@@redux/INIT"
}

export default function createStore(reducer, initialState, enhancer) {
  // 檢查你的state和enhance參數(shù)有沒有傳反
  if (typeof initialState === "function" && typeof enhancer === "undefined") {
    enhancer = initialState
    initialState = undefined
  }
  // 如果有傳入合法的enhance，則通過enhancer再調(diào)用一次createStore
  if (typeof enhancer !== "undefined") {
    if (typeof enhancer !== "function") {
      throw new Error("Expected the enhancer to be a function.")
    }
    return enhancer(createStore)(reducer, initialState)
  }

  if (typeof reducer !== "function") {
    throw new Error("Expected the reducer to be a function.")
  }

  var currentReducer = reducer
  var currentState = initialState
  var currentListeners = []
  var nextListeners = currentListeners
  var isDispatching = false // 是否正在分發(fā)事件

  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()
    }
  }

  // 我們在action middleware中經(jīng)常使用的getState()方法，返回當(dāng)前state
  function getState() {
    return currentState
  }

  // 注冊listener，同時返回一個取消事件注冊的方法。當(dāng)調(diào)用store.dispatch的時候調(diào)用listener
  function subscribe(listener) {
    if (typeof listener !== "function") {
      throw new Error("Expected listener to be a function.")
    }

    var isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false
      // 從nextListeners中去除掉當(dāng)前l(fā)istener
      ensureCanMutateNextListeners()
      var index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
    }
  }

  // dispatch方法接收的action是個對象，而不是方法。
  // 這個對象實(shí)際上就是我們自定義action的返回值，因?yàn)閐ispatch的時候，已經(jīng)調(diào)用過我們的自定義action了，比如 dispatch(addTodo())
  function dispatch(action) {
    if (!isPlainObject(action)) {
      throw new Error(
        "Actions must be plain objects. " +
        "Use custom middleware for async actions."
      )
    }

    if (typeof action.type === "undefined") {
      throw new Error(
        "Actions may not have an undefined "type" property. " +
        "Have you misspelled a constant?"
      )
    }
    // 調(diào)用dispatch的時候只能一個個調(diào)用，通過dispatch判斷調(diào)用的狀態(tài)
    if (isDispatching) {
      throw new Error("Reducers may not dispatch actions.")
    }

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }
    // 遍歷調(diào)用各個linster
    var listeners = currentListeners = nextListeners
    for (var i = 0; i < listeners.length; i++) {
      listeners[i]()
    }

    return action
  }
  // Replaces the reducer currently used by the store to calculate the state.
  function replaceReducer(nextReducer) {
    if (typeof nextReducer !== "function") {
      throw new Error("Expected the nextReducer to be a function.")
    }

    currentReducer = nextReducer
    dispatch({ type: ActionTypes.INIT })
  }
  // 當(dāng)create store的時候，reducer會接受一個type為ActionTypes.INIT的action，使reducer返回他們默認(rèn)的state，這樣可以快速的形成默認(rèn)的state的結(jié)構(gòu)
  dispatch({ type: ActionTypes.INIT })

  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer
  }
}

源碼及其簡單簡直給跪...

// 返回以 dispatch 和 getState 作為參數(shù)的action
export default function thunkMiddleware({ dispatch, getState }) {
  return next => action => {
    if (typeof action === "function") {
      return action(dispatch, getState);
    }

    return next(action);
  };
}

先復(fù)習(xí)下用法：

// usage
import {createStore, applyMiddleware} from "redux";
import thunkMiddleware from "redux-thunk";

const store = createStore(
      reducers,
      state,
      applyMiddleware(thunkMiddleware)
);

applyMiddleware首先接收thunkMiddleware作為參數(shù)，兩者組合成為一個新的函數(shù)（enhance），之后在createStore內(nèi)部，因?yàn)?b>enhance的存在，將會變成返回enhancer(createStore)(reducer, initialState)

源碼標(biāo)注解讀（省略部分）：

// 定義一個代碼組合的方法
// 傳入一些function作為參數(shù)，返回其鏈?zhǔn)秸{(diào)用的形態(tài)。例如，
// compose(f, g, h) 最終返回 (...args) => f(g(h(...args)))
export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  } else {
    const last = funcs[funcs.length - 1]
    const rest = funcs.slice(0, -1)
    return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
  }
}

export default function applyMiddleware(...middlewares) {
  // 最終返回一個以createStore為參數(shù)的匿名函數(shù)
  // 這個函數(shù)返回另一個以reducer, initialState, enhancer為參數(shù)的匿名函數(shù)
  return (createStore) => (reducer, initialState, enhancer) => {
    var store = createStore(reducer, initialState, enhancer)
    var dispatch
    var chain = []

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    // 每個 middleware 都以 middlewareAPI 作為參數(shù)進(jìn)行注入，返回一個新的鏈。此時的返回值相當(dāng)于調(diào)用 thunkMiddleware 返回的函數(shù)： (next) => (action) => {} ，接收一個next作為其參數(shù)
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    // 并將鏈代入進(jìn) compose 組成一個函數(shù)的調(diào)用鏈
    // compose(...chain) 返回形如(...args) => f(g(h(...args)))，f/g/h都是chain中的函數(shù)對象。
    // 在目前只有 thunkMiddleware 作為 middlewares 參數(shù)的情況下，將返回 (next) => (action) => {}
    // 之后以 store.dispatch 作為參數(shù)進(jìn)行注入
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

一臉懵逼？沒關(guān)系，來結(jié)合實(shí)際使用總結(jié)一下：

當(dāng)我們搭配redux-thunk這個庫的時候，在redux配合components時，通常這么寫

import thunkMiddleware from "redux-thunk";
import { createStore, applyMiddleware, combineReducer } from "redux";
import * as reducers from "./reducers.js";

const appReducer = combineReducer(reducers);
const store = createStore(appReducer, initialState, applyMiddleware(thunkMiddleware));

還記得當(dāng)createStore收到的參數(shù)中有enhance時會怎么做嗎？

// createStore.js
if (typeof enhancer !== "undefined") {
  if (typeof enhancer !== "function") {
    throw new Error("Expected the enhancer to be a function.")
  }
  return enhancer(createStore)(reducer, initialState)
}

也就是說，會變成下面的情況

applyMiddleware(thunkMiddleware)(createStore)(reducer, initialState)

applyMiddleware(thunkMiddleware)
applyMiddleware接收thunkMiddleware作為參數(shù)，返回形如(createStore) => (reducer, initialState, enhancer) => {}的函數(shù)。

applyMiddleware(thunkMiddleware)(createStore)
以 createStore 作為參數(shù)，調(diào)用上一步返回的函數(shù)(reducer, initialState, enhancer) => {}

applyMiddleware(thunkMiddleware)(createStore)(reducer, initialState)
以（reducer, initialState）為參數(shù)進(jìn)行調(diào)用。

在這個函數(shù)內(nèi)部，thunkMiddleware被調(diào)用，其作用是監(jiān)測type是function的action

因此，如果dispatch的action返回的是一個function，則證明是中間件，則將(dispatch, getState)作為參數(shù)代入其中，進(jìn)行action 內(nèi)部下一步的操作。否則的話，認(rèn)為只是一個普通的action，將通過next(也就是dispatch)進(jìn)一步分發(fā)。

也就是說，applyMiddleware(thunkMiddleware)作為enhance，最終起了這樣的作用：

對dispatch調(diào)用的action(例如，dispatch(addNewTodo(todo)))進(jìn)行檢查，如果action在第一次調(diào)用之后返回的是function，則將(dispatch, getState)作為參數(shù)注入到action返回的方法中，否則就正常對action進(jìn)行分發(fā)，這樣一來我們的中間件就完成嘍~

因此，當(dāng)action內(nèi)部需要獲取state，或者需要進(jìn)行異步操作，在操作完成之后進(jìn)行事件調(diào)用分發(fā)的話，我們就可以讓action 返回一個以(dispatch, getState)為參數(shù)的function而不是通常的Object，enhance就會對其進(jìn)行檢測以便正確的處理。

這個方法感覺比較少見，我個人也很少用到

在傳統(tǒng)寫法下，當(dāng)我們要把 state 和 action 注入到子組件中時，一般會這么做：

import { connect } from "react-redux";
import {addTodo, deleteTodo} from "./action.js";

class TodoComponect extends Component {
  render() {
    return (
      
    )
  }
}

function mapStateToProps(state) {
  return {
    state
  }
}
function mapDispatchToProps(dispatch) {
  return {
    deleteTodo: (id) => {
      dispatch(deleteTodo(id));
    },
    addTodo: (todo) => {
      dispatch(addTodo(todo));
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoComponect);

使用bindActionCreators可以把 action 轉(zhuǎn)為同名 key 的對象，但使用 dispatch 把每個 action 包圍起來調(diào)用

惟一使用 bindActionCreators 的場景是當(dāng)你需要把 action creator 往下傳到一個組件上，卻不想讓這個組件覺察到 Redux 的存在，而且不希望把 Redux store 或 dispatch 傳給它。

import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import {addTodo, deleteTodo} as TodoActions from "./action.js";

class TodoComponect extends React.Component {
  
  // 在本組件內(nèi)的應(yīng)用
  addTodo(todo) {
    let action = TodoActions.addTodo(todo);
    this.props.dispatch(action);
  }
  
  deleteTodo(id) {
    let action = TodoActions.deleteTodo(id);
    this.props.dispatch(action);
  }
  
  render() {
    let dispatch = this.props.dispatch;
    // 傳遞給子組件
    let boundActionCreators = bindActionCreators(TodoActions, dispatch);
    return (
      
    )
  }
}

function mapStateToProps(state) {
  return {
    state
  }
}
export default connect(mapStateToProps)(TodoComponect)

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

// bindActionCreators期待一個Object作為actionCreators傳入，里面是 key: action
export default function bindActionCreators(actionCreators, dispatch) {
  // 如果只是傳入一個action，則通過bindActionCreator返回被綁定到dispatch的函數(shù)
  if (typeof actionCreators === "function") {
    return bindActionCreator(actionCreators, dispatch)
  }

  if (typeof actionCreators !== "object" || actionCreators === null) {
    throw new Error(
      `bindActionCreators expected an object or a function, instead received ${actionCreators === null ? "null" : typeof actionCreators}. ` +
      `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`
    )
  }

  // 遍歷并通過bindActionCreator分發(fā)綁定至dispatch
  var keys = Object.keys(actionCreators)
  var boundActionCreators = {}
  for (var i = 0; i < keys.length; i++) {
    var key = keys[i]
    var actionCreator = actionCreators[key]
    if (typeof actionCreator === "function") {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}

export default class Provider extends Component {
  getChildContext() {
    // 將其聲明為 context 的屬性之一
    return { store: this.store }
  }

  constructor(props, context) {
    super(props, context)
    // 接收 redux 的 store 作為 props
    this.store = props.store
  }

  render() {
    return Children.only(this.props.children)
  }
}

if (process.env.NODE_ENV !== "production") {
  Provider.prototype.componentWillReceiveProps = function (nextProps) {
    const { store } = this
    const { store: nextStore } = nextProps

    if (store !== nextStore) {
      warnAboutReceivingStore()
    }
  }
}

Provider.propTypes = {
  store: storeShape.isRequired,
  children: PropTypes.element.isRequired
}
Provider.childContextTypes = {
  store: storeShape.isRequired
}

傳入mapStateToProps,mapDispatchToProps,mergeProps,options。
首先獲取傳入的參數(shù)，如果沒有則以默認(rèn)值代替

const defaultMapStateToProps = state => ({}) // eslint-disable-line no-unused-vars
const defaultMapDispatchToProps = dispatch => ({ dispatch })
const { pure = true, withRef = false } = options

之后，通過

const finalMergeProps = mergeProps || defaultMergeProps

選擇合并stateProps,dispatchProps,parentProps的方式，默認(rèn)的合并方式 defaultMergeProps 為：

const defaultMergeProps = (stateProps, dispatchProps, parentProps) => ({
  ...parentProps,
  ...stateProps,
  ...dispatchProps
})

返回一個以 Component 作為參數(shù)的函數(shù)。在這個函數(shù)內(nèi)部，生成了一個叫做Connect的 Component

// ...
  return function wrapWithConnect(WrappedComponent) {
    const connectDisplayName = `Connect(${getDisplayName(WrappedComponent)})`
    // 檢查參數(shù)合法性
    function checkStateShape(props, methodName) {}
    // 合并props
    function computeMergedProps(stateProps, dispatchProps, parentProps) {
      const mergedProps = finalMergeProps(stateProps, dispatchProps, parentProps)
      if (process.env.NODE_ENV !== "production") {
        checkStateShape(mergedProps, "mergeProps")
      }
      return mergedProps
    }
    
    // start of Connect
    class Connect extends Component {
      constructor(props, context) {
        super(props, context);
        this.store = props.store || context.store
        
        const storeState = this.store.getState()
        this.state = { storeState }
        this.clearCache()
      }
      
      computeStateProps(store, props) {
        // 調(diào)用configureFinalMapState，使用傳入的mapStateToProps方法（或默認(rèn)方法），將state map進(jìn)props
      }
      configureFinalMapState(store, props) {}
      
      computeDispatchProps(store, props) {
        // 調(diào)用configureFinalMapDispatch，使用傳入的mapDispatchToProps方法（或默認(rèn)方法），將action使用dispatch封裝map進(jìn)props
      }
      configureFinalMapDispatch(store, props) {}
      
      // 判斷是否更新props
      updateStatePropsIfNeeded() {}
      updateDispatchPropsIfNeeded() {}
      updateMergedPropsIfNeeded() {}
      
      componentDidMount() {
        // 內(nèi)部調(diào)用this.store.subscribe(this.handleChange.bind(this))
        this.trySubscribe()
      }
      handleChange() {
        const storeState = this.store.getState()
        const prevStoreState = this.state.storeState
        // 對數(shù)據(jù)進(jìn)行監(jiān)聽，發(fā)送改變時調(diào)用
        this.setState({ storeState })
      }
      
      // 取消監(jiān)聽，清除緩存
      componentWillUnmount() {
        this.tryUnsubscribe()
        this.clearCache()
      }
      
      render() {
        this.renderedElement = createElement(WrappedComponent,
            this.mergedProps
        )
        return this.renderedElement
      }
    }
    // end of Connect
    
    Connect.displayName = connectDisplayName
    Connect.WrappedComponent = WrappedComponent
    Connect.contextTypes = {
      store: storeShape
    }
    Connect.propTypes = {
      store: storeShape
    }
    
    return hoistStatics(Connect, WrappedComponent)
  }
// ...

我們看見，在connect的最后，返回了使用hoistStatics包裝的Connect和WrappedComponent

hoistStatics是什么鬼？為什么使用它?

Copies non-react specific statics from a child component to a parent component. Similar to Object.assign, but with React static keywords blacklisted from being overridden.

也就是說，它類似于Object.assign，作用是將子組件中的 static 方法復(fù)制進(jìn)父組件，但不會覆蓋組件中的關(guān)鍵字方法(如 componentDidMount)

import hoistNonReactStatic from "hoist-non-react-statics";

hoistNonReactStatic(targetComponent, sourceComponent);