關於react-redux的一個流程圖

流程圖

connect用法介紹

connect方法宣告：

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

作用：連線React元件與 Redux store。

引數說明：

mapStateToProps(state, ownProps) : stateProps

這個函式允許我們將 store 中的資料作為 props 繫結到元件上。

const mapStateToProps = (state) => {
  return {
    count: state.count
  }
}
 

（1）這個函式的第一個引數就是 Redux 的 store，我們從中摘取了 count 屬性。你不必將 state 中的資料原封不動地傳入元件，可以根據 state 中的資料，動態地輸出元件需要的（最小）屬性。

（2）函式的第二個引數 ownProps，是元件自己的 props。有的時候，ownProps 也會對其產生影響。

當 state 變化，或者 ownProps 變化的時候，mapStateToProps 都會被呼叫，計算出一個新的 stateProps，（在與 ownProps merge 後）更新給元件。

mapDispatchToProps(dispatch, ownProps): dispatchProps
 

connect 的第二個引數是 mapDispatchToProps，它的功能是，將 action 作為 props 繫結到元件上，也會成為 MyComp 的 props。

[mergeProps],[options]

不管是 stateProps 還是 dispatchProps，都需要和 ownProps merge 之後才會被賦給元件。connect 的第三個引數就是用來做這件事。通常情況下，你可以不傳這個引數，connect 就會使用 Object.assign 替代該方法。

[options] (Object) 如果指定這個引數，可以定製 connector 的行為。一般不用。

原理解析

首先connect之所以會成功，是因為Provider元件：

• 在原應用元件上包裹一層，使原來整個應用成為Provider的子元件
• 接收Redux的store作為props，通過context物件傳遞給子孫元件上的connect

那connect做了些什麼呢？

它真正連線 Redux 和 React，它包在我們的容器元件的外一層，它接收上面 Provider 提供的 store 裡面的 state 和 dispatch，傳給一個建構函式，返回一個物件，以屬性形式傳給我們的容器元件。

關於它的原始碼

connect是一個高階函式，首先傳入mapStateToProps、mapDispatchToProps，然後返回一個生產Component的函式(wrapWithConnect)，然後再將真正的Component作為引數傳入wrapWithConnect，這樣就生產出一個經過包裹的Connect元件，該元件具有如下特點:

• 通過props.store獲取祖先Component的store
• props包括stateProps、dispatchProps、parentProps,合併在一起得到nextState，作為props傳給真正的Component
• componentDidMount時，新增事件this.store.subscribe(this.handleChange)，實現頁面互動
• shouldComponentUpdate時判斷是否有避免進行渲染，提升頁面效能，並得到nextState
• componentWillUnmount時移除註冊的事件this.handleChange

由於connect的原始碼過長，我們只看主要邏輯：

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
  return function wrapWithConnect(WrappedComponent) {
    class Connect extends Component {
      constructor(props, context) {
        // 從祖先Component處獲得store
        this.store = props.store || context.store
        this.stateProps = computeStateProps(this.store, props)
        this.dispatchProps = computeDispatchProps(this.store, props)
        this.state = { storeState: null }
        // 對stateProps、dispatchProps、parentProps進行合併
        this.updateState()
      }
      shouldComponentUpdate(nextProps, nextState) {
        // 進行判斷，當資料發生改變時，Component重新渲染
        if (propsChanged || mapStateProducedChange || dispatchPropsChanged) {
          this.updateState(nextProps)
            return true
          }
        }
        componentDidMount() {
          // 改變Component的state
          this.store.subscribe(() = {
            this.setState({
              storeState: this.store.getState()
            })
          })
        }
        render() {
          // 生成包裹元件Connect
          return (
            <WrappedComponent {...this.nextState} />
          )
        }
      }
      Connect.contextTypes = {
        store: storeShape
      }
      return Connect;
    }
  }

connect使用例項

這裡我們寫一個關於計數器使用的例項：

Component/Counter.js

import React, {Component} from 'react'

class Counter extends Component {
    render() {
        //從元件的props屬性中匯入四個方法和一個變數
        const {increment, decrement, counter} = this.props;
        //渲染元件，包括一個數字，四個按鈕
        return (
            <p>
                Clicked: {counter} times
                {' '}
                <button onClick={increment}>+</button>
                {' '}
                <button onClick={decrement}>-</button>
                {' '}
            </p>
        )
    }
}

export default Counter;

Container/App.js

import { connect } from 'react-redux'
import Counter from '../components/Counter'
import actions from '../actions/counter';

//將state.counter繫結到props的counter
const mapStateToProps = (state) => {
    return {
        counter: state.counter
    }
};
//將action的所有方法繫結到props上
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        increment: (...args) => dispatch(actions.increment(...args)),
        decrement: (...args) => dispatch(actions.decrement(...args))
    }
};

//通過react-redux提供的connect方法將我們需要的state中的資料和actions中的方法繫結到props上
export default connect(mapStateToProps, mapDispatchToProps)(Counter)

完整程式碼

作者：7天蘋果
連結：https://www.jianshu.com/p/9873d4ccb891
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。