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

無名小貝勒發表於2018-04-10
ReactRedux

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的其他引數等，可以去看一下對應的原始碼。

相關文章