react、redux、react-redux之間的關係

React

一些小型項目，只使用 React 徹底夠用了，數據管理使用props、state便可，那何時須要引入Redux呢？ 當渲染一個組件的數據是經過props從父組件中獲取時，一般狀況下是 A --> B，但隨着業務複雜度的增長，有多是這樣的：A --> B --> C --> D --> E，E須要的數據須要從A那裏經過props傳遞過來，以及對應的 E --> A逆向傳遞callback。組件BCD是不須要這些數據的，可是又必須經由它們來傳遞，這確實有點不爽，並且傳遞的props以及callback對BCD組件的複用也會形成影響。或者兄弟組件之間想要共享某些數據，也不是很方便傳遞、獲取等。諸如此類的狀況，就有必要引入Redux了。

其實 A --> B --> C --> D --> E 這種狀況，React不使用props層層傳遞也是能拿到數據的，使用Context便可。後面要講到的react-redux就是經過Context讓各個子組件拿到store中的數據的。

Redux

其實咱們只是想找個地方存放一些共享數據而已，你們均可以獲取到，也均可以進行修改，僅此而已。 那放在一個所有變量裏面行不行？行，固然行，可是太不優雅，也不安全，由於是全局變量嘛，誰都能訪問、誰都能修改，有可能一不當心被哪一個小夥伴覆蓋了也說不定。那全局變量不行就用私有變量唄，私有變量、不能輕易被修改，是否是立馬就想到閉包了...

如今要寫這樣一個函數，其知足：

• 存放一個數據對象
• 外界能訪問到這個數據
• 外界也能修改這個數據
• 當數據有變化的時候，通知訂閱者

function createStore(reducer, initialState) {
  // currentState就是那個數據
  let currentState = initialState;
  let listener = () => {};

  function getState() {
    return currentState;
  }
  function dispatch(action) {
    currentState = reducer(currentState, action); // 更新數據
    listener(); // 執行訂閱函數
    return action;
  }
  function subscribe(newListener) {
    listener = newListener;
    // 取消訂閱函數
    return function unsubscribe() {
      listener = () => {};
    };
  }
  return {
    getState,
    dispatch,
    subscribe
  };
}

const store = createStore(reducer);
store.getState(); // 獲取數據
store.dispatch({type: 'ADD_TODO'}); // 更新數據
store.subscribe(() => {/* update UI */}); // 註冊訂閱函數
複製代碼

更新數據執行的步驟：

• What：想幹什麼 --- dispatch(action)
• How：怎麼幹，乾的結果 --- reducer(oldState, action) => newState
• Then?：從新執行訂閱函數（好比從新渲染UI等）

這樣就實現了一個store，提供一個數據存儲中心，能夠供外部訪問、修改等，這就是Redux的主要思想。 因此，Redux確實和React沒有什麼本質關係，Redux能夠結合其餘庫正常使用。只不過Redux這種數據管理方式，跟React的數據驅動視圖理念很合拍，它倆結合在一塊兒，開發很是便利。

如今既然有了一個安全的地方存取數據，怎麼結合到React裏面呢？ 咱們能夠在應用初始化的時候，建立一個window.store = createStore(reducer)，而後在須要的地方經過store.getState()去獲取數據，經過store.dispatch去更新數據，經過store.subscribe去訂閱數據變化而後進行setState...若是不少地方都這樣作一遍，實在是不堪其重，並且，仍是沒有避免掉全局變量的不優雅。

React-Redux

因爲全局變量有諸多的缺點，那就換個思路，把store直接集成到React應用的頂層props裏面，只要各個子組件能訪問到頂層props就好了，好比這樣：

<TopWrapComponent store={store}>
  <App /> </TopWrapComponent>,
複製代碼

React剛好提供了這麼一個鉤子，Context，用法很簡單，看一下官方demo就明瞭。如今各個子組件已經可以輕易地訪問到store了，接下來就是子組件把store中用到的數據取出來、修改、以及訂閱更新UI等。每一個子組件都須要這樣作一遍，顯然，確定有更便利的方法：高階組件。經過高階組件把store.getState()、store.dispatch、store.subscribe封裝起來，子組件對store就無感知了，子組件正常使用props獲取數據以及正常使用callback觸發回調，至關於沒有store存在同樣。

下面是這個高階組件的大體實現：

function connect(mapStateToProps, mapDispatchToProps) {
  return function(WrappedComponent) {
    class Connect extends React.Component {
      componentDidMount() {
        // 組件加載完成後訂閱store變化，若是store有變化則更新UI
        this.unsubscribe = this.context.store.subscribe(this.handleStoreChange.bind(this));
      }
      componentWillUnmount() {
        // 組件銷燬後，取消訂閱事件
        this.unsubscribe();
      }
      handleStoreChange() {
        // 更新UI
        this.forceUpdate();
      }
      render() {
        return (
          <WrappedComponent {...this.props} {...mapStateToProps(this.context.store.getState())} // 參數是store裏面的數據 {...mapDispatchToProps(this.context.store.dispatch)} // 參數是store.dispatch /> ); } } Connect.contextTypes = { store: PropTypes.object }; return Connect; }; } 複製代碼

使用connect的時候，咱們知道要寫一些樣板化的代碼，好比mapStateToProps、mapDispatchToProps這兩個函數：

const mapStateToProps = state => {
  return {
    count: state.count
  };
};

const mapDispatchToProps = dispatch => {
  return {
    dispatch
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Child);

// 上述代碼執行以後，能夠看到connect函數裏面的
  <WrappedComponent
    {...this.props}
    {...mapStateToProps(this.context.store.getState())}
    {...mapDispatchToProps(this.context.store.dispatch)}
  />

// 就變成了
  <WrappedComponent
    {...this.props}
    {count: store.getState().count}
    {dispatch: store.dispatch}
  />

// 這樣，子組件Child的props裏面就多了count和dispatch兩個屬性
// count能夠用來渲染UI，dispatch能夠用來觸發回調
複製代碼

---

So，這樣就OK了？OK了。 經過一個閉包生成一個數據中心store，而後把這個store綁定到React的頂層props裏面，子組件經過HOC創建與頂層props.store的聯繫，進而獲取數據、修改數據、更新UI。 這裏主要講了一下三者怎麼竄在一塊兒的，若是想了解更高級的功能，好比redux中間件、reducer拆分、connect的其餘參數等，能夠去看一下對應的源碼。