本文介紹了react、redux、react-redux之間的關(guān)系，分享給大家，也給自己留個(gè)筆記，具體如下：

React

一些小型項(xiàng)目，只使用 React 完全夠用了，數(shù)據(jù)管理使用props、state即可，那什么時(shí)候需要引入Redux呢？ 當(dāng)渲染一個(gè)組件的數(shù)據(jù)是通過props從父組件中獲取時(shí)，通常情況下是 A --> B，但隨著業(yè)務(wù)復(fù)雜度的增加，有可能是這樣的：A --> B --> C --> D --> E，E需要的數(shù)據(jù)需要從A那里通過props傳遞過來，以及對(duì)應(yīng)的 E --> A逆向傳遞callback。組件BCD是不需要這些數(shù)據(jù)的，但是又必須經(jīng)由它們來傳遞，這確實(shí)有點(diǎn)不爽，而且傳遞的props以及callback對(duì)BCD組件的復(fù)用也會(huì)造成影響。或者兄弟組件之間想要共享某些數(shù)據(jù)，也不是很方便傳遞、獲取等。諸如此類的情況，就有必要引入Redux了。

其實(shí) A --> B --> C --> D --> E 這種情況，React不使用props層層傳遞也是能拿到數(shù)據(jù)的，使用Context即可。后面要講到的react-redux就是通過Context讓各個(gè)子組件拿到store中的數(shù)據(jù)的。

Redux

其實(shí)我們只是想找個(gè)地方存放一些共享數(shù)據(jù)而已，大家都可以獲取到，也都可以進(jìn)行修改，僅此而已。 那放在一個(gè)全部變量里面行不行？行，當(dāng)然行，但是太不優(yōu)雅，也不安全，因?yàn)槭侨肿兞柯铮l(shuí)都能訪問、誰(shuí)都能修改，有可能一不小心被哪個(gè)小伙伴覆蓋了也說不定。那全局變量不行就用私有變量唄，私有變量、不能輕易被修改，是不是立馬就想到閉包了...

現(xiàn)在要寫這樣一個(gè)函數(shù)，其滿足：

1. 存放一個(gè)數(shù)據(jù)對(duì)象
2. 外界能訪問到這個(gè)數(shù)據(jù)
3. 外界也能修改這個(gè)數(shù)據(jù)
4. 當(dāng)數(shù)據(jù)有變化的時(shí)候，通知訂閱者

function createStore(reducer, initialState) { // currentState就是那個(gè)數(shù)據(jù) let currentState = initialState; let listener = () => {}; function getState() { return currentState; } function dispatch(action) { currentState = reducer(currentState, action); // 更新數(shù)據(jù) listener(); // 執(zhí)行訂閱函數(shù) return action; } function subscribe(newListener) { listener = newListener; // 取消訂閱函數(shù) return function unsubscribe() {  listener = () => {}; }; } return { getState, dispatch, subscribe };}const store = createStore(reducer);store.getState(); // 獲取數(shù)據(jù)store.dispatch({type: 'ADD_TODO'}); // 更新數(shù)據(jù)store.subscribe(() => {/* update UI */}); // 注冊(cè)訂閱函數(shù)

更新數(shù)據(jù)執(zhí)行的步驟：

1. What：想干什么 --- dispatch(action)
2. How：怎么干，干的結(jié)果 --- reducer(oldState, action) => newState
3. Then?：重新執(zhí)行訂閱函數(shù)（比如重新渲染UI等）

這樣就實(shí)現(xiàn)了一個(gè)store，提供一個(gè)數(shù)據(jù)存儲(chǔ)中心，可以供外部訪問、修改等，這就是Redux的主要思想。 所以，Redux確實(shí)和React沒有什么本質(zhì)關(guān)系，Redux可以結(jié)合其他庫(kù)正常使用。只不過Redux這種數(shù)據(jù)管理方式，跟React的數(shù)據(jù)驅(qū)動(dòng)視圖理念很合拍，它倆結(jié)合在一起，開發(fā)非常便利。

現(xiàn)在既然有了一個(gè)安全的地方存取數(shù)據(jù)，怎么結(jié)合到React里面呢？ 我們可以在應(yīng)用初始化的時(shí)候，創(chuàng)建一個(gè)window.store = createStore(reducer)，然后在需要的地方通過store.getState()去獲取數(shù)據(jù)，通過store.dispatch去更新數(shù)據(jù)，通過store.subscribe去訂閱數(shù)據(jù)變化然后進(jìn)行setState...如果很多地方都這樣做一遍，實(shí)在是不堪其重，而且，還是沒有避免掉全局變量的不優(yōu)雅。

React-Redux

由于全局變量有諸多的缺點(diǎn)，那就換個(gè)思路，把store直接集成到React應(yīng)用的頂層props里面，只要各個(gè)子組件能訪問到頂層props就行了，比如這樣：

<TopWrapComponent store={store}> <App /></TopWrapComponent>,

React恰好提供了這么一個(gè)鉤子，Context，用法很簡(jiǎn)單，看一下官方demo就明了。現(xiàn)在各個(gè)子組件已經(jīng)能夠輕易地訪問到store了，接下來就是子組件把store中用到的數(shù)據(jù)取出來、修改、以及訂閱更新UI等。每個(gè)子組件都需要這樣做一遍，顯然，肯定有更便利的方法：高階組件。通過高階組件把store.getState()、store.dispatch、store.subscribe封裝起來，子組件對(duì)store就無感知了，子組件正常使用props獲取數(shù)據(jù)以及正常使用callback觸發(fā)回調(diào)，相當(dāng)于沒有store存在一樣。

下面是這個(gè)高階組件的大致實(shí)現(xiàn)：

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())} // 參數(shù)是store里面的數(shù)據(jù)   {...mapDispatchToProps(this.context.store.dispatch)} // 參數(shù)是store.dispatch   />  );  } } Connect.contextTypes = {  store: PropTypes.object }; return Connect; };}

使用connect的時(shí)候，我們知道要寫一些樣板化的代碼，比如mapStateToProps、mapDispatchToProps這兩個(gè)函數(shù)：

const mapStateToProps = state => { return { count: state.count };};const mapDispatchToProps = dispatch => { return { dispatch };};export default connect(mapStateToProps, mapDispatchToProps)(Child);// 上述代碼執(zhí)行之后，可以看到connect函數(shù)里面的 <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兩個(gè)屬性// count可以用來渲染UI，dispatch可以用來觸發(fā)回調(diào)

So，這樣就OK了？OK了。 通過一個(gè)閉包生成一個(gè)數(shù)據(jù)中心store，然后把這個(gè)store綁定到React的頂層props里面，子組件通過HOC建立與頂層props.store的聯(lián)系，進(jìn)而獲取數(shù)據(jù)、修改數(shù)據(jù)、更新UI。 這里主要講了一下三者怎么竄在一起的，如果想了解更高級(jí)的功能，比如redux中間件、reducer拆分、connect的其他參數(shù)等，可以去看一下對(duì)應(yīng)的源碼。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。