本文介紹了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的數據驅動視圖理念很合拍，它倆結合在一起，開發非常便利。