當前位置:
首頁 > 知識 > 詳解react、redux、react-redux之間的關係

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

本文介紹了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

其實我們只是想找個地方存放一些共享數據而已,大家都可以獲取到,也都可以進行修改,僅此而已。 那放在一個全部變數裡面行不行?行,當然行,但是太不優雅,也不安全,因為是全局變數嘛,誰都能訪問、誰都能修改,有可能一不小心被哪個小夥伴覆蓋了也說不定。那全局變數不行就用私有變數唄,私有變數、不能輕易被修改,是不是立馬就想到閉包了...

現在要寫這樣一個函數,其滿足:

  1. 存放一個數據對象
  2. 外界能訪問到這個數據
  3. 外界也能修改這個數據
  4. 當數據有變化的時候,通知訂閱者

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 */}); // 註冊訂閱函數

更新數據執行的步驟:

  1. What:想幹什麼 --- dispatch(action)
  2. How:怎麼干,乾的結果 --- reducer(oldState, action) => newState
  3. 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的其他參數等,可以去看一下對應的源碼。

以上就是本文的全部內容,希望對大家的學習有所幫助,

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

打開今日頭條,查看更多精彩圖片
喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

Storm集群搭建小結
Serverless(無伺服器架構)4大優點和缺點

TAG:程序員小新人學習 |