redux

為什么使用Redux：

使用react進(jìn)行大型項(xiàng)目開發(fā)時(shí)，需要管理的狀態(tài)不僅數(shù)量很多而且相互共享，一個(gè)狀態(tài)多個(gè)組件都要共享使用并且渲染，管理不斷變化的 state 非常困難。所以我們需要把 state 進(jìn)行統(tǒng)一管理，這樣才能控制每一個(gè)state的變化，讓我們的程序可讀性更強(qiáng)，出錯(cuò)率更低。

一、什么是Redux？

Redux 是一個(gè) JS 庫(kù)，一個(gè)狀態(tài)容器。

作用： 集中式管理 React 應(yīng)用中 多個(gè)組件共享的狀態(tài)

（1）它可以和 react，vue，angular 等一起使用，但一般都和 react一起使用 。
（2）Redux 可以 解耦 React（View層）于數(shù)據(jù)管理和對(duì)數(shù)據(jù)的操作，保持View層的純凈，讓每一個(gè)組件的職責(zé)劃分更加清楚，同時(shí)又降低了React數(shù)據(jù)傳遞的難度和不可控性
（3）Redux 采用了中間件機(jī)制，既保證了代碼的簡(jiǎn)潔，又增加了可擴(kuò)展性。

Redux的三大原則：

• 單一數(shù)據(jù)源：整個(gè)應(yīng)用的state都被存儲(chǔ)到一個(gè)狀態(tài)樹里面，并且這個(gè)狀態(tài)樹，只存在于唯一的store中。
• State 是只讀的：唯一改變 state 的方法就是觸發(fā) action，action 是一個(gè)用于描述已發(fā)生事件的普通對(duì)象。
• 使用純函數(shù)來(lái)執(zhí)行修改：為了描述 action 如何改變 state tree ，你需要編寫 reducers。

使用場(chǎng)景：

• 某個(gè)組件的狀態(tài)，需要共享；
• 某個(gè)狀態(tài)需要在任何地方都可以拿到；
• 一個(gè)組件需要改變?nèi)譅顟B(tài)；
• 一個(gè)組件需要改變另一個(gè)組件的狀態(tài)。

二、Redux的工作原理

分析

redux流程圖如下：

1. redux的三個(gè)關(guān)鍵函數(shù)：getState()、subscribe()、dispatch()

• getState() ：用于獲取當(dāng)前最新的狀態(tài)
• subscribe() ：用于訂閱監(jiān)聽當(dāng)前狀態(tài)的變化，然后促使頁(yè)面重新渲染
• dispatch() ：用于發(fā)布最新的狀態(tài)

2. Redux整體執(zhí)行流程

（1）用戶通過事件觸發(fā)ActionCreator制造action

（2）同時(shí)，用戶觸發(fā)的事件內(nèi)調(diào)用dispatch來(lái)派發(fā)action

（3）reducer接收action，并處理state返回newState

（4）View層通過getState( )來(lái)接收newState并重新渲染視圖層

三、Redux文件分析

四、Redux流程解析

單個(gè)組件使用redux：

（1）創(chuàng)建redux的核心store對(duì)象，store集中管理狀態(tài)。那狀態(tài)從哪來(lái)呢？Reducer

（2）創(chuàng)建Reducer，定義狀態(tài)的初值、處理狀態(tài)的方法。 Reducer是只負(fù)責(zé)執(zhí)行，那需要判斷的東西從哪來(lái)呢？Action

（3）在創(chuàng)建Action之前，我們需要?jiǎng)?chuàng)建constant.js定義action中的type類型。

（4）創(chuàng)建Action，對(duì)定義好的方法進(jìn)行封裝。 那封裝好的函數(shù)去哪里用呢？在組件中使用

（5）在組件中綁定事件（dispatch引用封裝函數(shù)，處理狀態(tài)），使用getState() 獲取最新狀態(tài)

（6）使用subscribe()訂閱store，監(jiān)聽根組件（最外部），只要狀態(tài)發(fā)生改變，就調(diào)用render重新渲染組件。

五、核心API

• createStore 創(chuàng)建一個(gè)store
• store.dispatch() 幫助我們派發(fā)一個(gè)action
• store.getState() 幫助我們獲取到state里面所有的數(shù)據(jù)內(nèi)容
• store.subscribe 可以訂閱 store數(shù)據(jù)的改變 ，只要數(shù)據(jù)發(fā)生改變，store.subscribe接受的回調(diào)函數(shù)就會(huì)被執(zhí)行

react-redux

一、什么是react-redux？

首先說一下redux和react-redux的區(qū)別：

• redux是react中進(jìn)行state狀態(tài)管理的JS庫(kù)，一般是管理多個(gè)組件中共享數(shù)據(jù)的，它并不是react的插件，是一個(gè)獨(dú)立的庫(kù)vue和angular等等一些框架都是可以使用的。
• React-Redux是Redux的官方React綁定庫(kù)。它能夠使你的React組件從Redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以更新數(shù)據(jù)。

二、react-redux的工作原理

分析

react-redux流程圖如下：（多組件共享狀態(tài)）

1. react-redux整體執(zhí)行流程

（1）用戶通過事件觸發(fā)ActionCreator制造action

（2）同時(shí)，用戶觸發(fā)的事件內(nèi)調(diào)用dispatch來(lái)派發(fā)action

（3）reducer接收action，并處理state返回newState

（4）View層通過getState( )來(lái)接收newState并重新渲染視圖層

三、React容器組件和UI組件

• React-Redux把所有的組件都拆分成了兩大類：UI組件 和 容器組件。

UI組件

1. 只負(fù)責(zé)UI的呈現(xiàn)，不帶有任何業(yè)務(wù)邏輯
2. 沒有狀態(tài)（即不適用this.state，或定義 state）
3. 所有數(shù)據(jù)都由 props 提供
4. 不使用任何 Redux 的API

容器組件

1. 負(fù)責(zé)管理數(shù)據(jù)和業(yè)務(wù)邏輯，不負(fù)責(zé)UI的呈現(xiàn)
2. 帶有內(nèi)部狀態(tài)
3. 使用 Redux 的API

如何定義容器組件

通過connect方法自動(dòng)生成容器組件 對(duì) UI組件的增強(qiáng)

connect接收兩個(gè)參數(shù)：
（1）mapStateToProps：負(fù)責(zé)輸入邏輯，即把 state 映射到 UI組件的參數(shù)（props）
（2）mapDispatchToProps：負(fù)責(zé)輸出邏輯，即 把用戶對(duì)UI組件的操作映射成 action

const Container = connect(mapStateToProps,mapDispatchToProps)(Counter)

四、react-redux流程解析

單個(gè)組件使用redux：

（1）創(chuàng)建redux的核心store對(duì)象，store集中管理狀態(tài)。那狀態(tài)從哪來(lái)呢？Reducer

（2）創(chuàng)建Reducer，定義狀態(tài)的初值、處理狀態(tài)的方法。 Reducer是只負(fù)責(zé)執(zhí)行，那需要判斷的東西從哪來(lái)呢？Action

（3）在創(chuàng)建Action之前，我們需要?jiǎng)?chuàng)建constant.js定義action中的type類型。

（4）創(chuàng)建Action，對(duì)定義好的方法進(jìn)行封裝。 那封裝好的函數(shù)去哪里用呢？在組件中使用

（5）在組件中綁定事件（dispatch引用封裝函數(shù)，處理狀態(tài)），使用getState() 獲取最新狀態(tài)

（6）使用subscribe()訂閱store，監(jiān)聽根組件（最外部），只要狀態(tài)發(fā)生改變，就調(diào)用render重新渲染組件。

單個(gè)組件使用redux：

• 在單個(gè)組件使用redux的基礎(chǔ)上，每個(gè)組件的action、reducer單獨(dú)定義。
• 多個(gè)組件的共同狀態(tài)都存放在唯一的store里面。
• 匯總所有的reducer變?yōu)橐粋€(gè)總的reducer，進(jìn)行統(tǒng)一的暴露。
• 多個(gè)組件的action共用一個(gè)constant，定義action中的type類型。

五、核心API

• createStore 創(chuàng)建一個(gè)store
• store.dispatch() 幫助我們派發(fā)一個(gè)action
• store.getState() 幫助我們獲取到state里面所有的數(shù)據(jù)內(nèi)容
• store.subscribe 可以訂閱 store數(shù)據(jù)的改變 ，只要數(shù)據(jù)發(fā)生改變，store.subscribe接受的回調(diào)函數(shù)就會(huì)被執(zhí)行
• composeWithDevTools 引入Redux DevTools，是一款用于調(diào)試的瀏覽器插件,它用來(lái)時(shí)時(shí)顯示當(dāng)前應(yīng)用的state信息,action觸發(fā)記錄以及state的變化
• applyMiddleware Redux 的原生方法，作用是將所有中間件組成一個(gè)數(shù)組，依次執(zhí)行。
• combineReducers匯總所有的reducer變?yōu)橐粋€(gè)總的reducer