【※墨痕】---redux---【react】

標籤：對象   組件   頁面   跟蹤   調用   rip   註冊   test   工具   

一、Redux概念：

　　Redux對於JavaScript應用而言是一個可預測狀態的容器。換言之，它是一個應用資料流架構，而不是傳統的像underscore.js或者AngularJs那樣的庫或者架構。

二、Redux與flux的區別：

　　Redux和Flux很像。主要區別在於Flux有多個可以改變應用狀態的store，它通過事件來觸發這些變化。組件可以訂閱這些事件來和目前狀態同步。Redux沒有分發器dispatcher，但在Flux中dispatcher被用來傳遞資料到註冊的回調事件。另一個不同是Flux中有很多擴充是可用的，這也帶來了一些混亂與矛盾。

三、Redux的好處：　

• 維護：具備可預測結果的性質和嚴格的組織圖讓代碼更容易維護。
• 預測：始終有一個準確的資料來源，就是store, 對於如何將actions以及應用的其他部分和當前的狀態同步可以做到絕不混亂。
• 組織：對代碼應該如何組織更加嚴苛，這使代碼更加一致，對團隊協作更加容易。
• 測試：編寫可測試代碼的首要準則就是編寫可以僅做一件事並且獨立的小函數。Redux的代碼幾乎全部都是這樣的函數：短小、純粹、分離。
• 服務端渲染：可以帶來更好的使用者體驗並且有助於搜尋引擎最佳化，尤其是對於首次渲染。僅僅是把服務端建立的store傳遞給用戶端就可以。
• 開發人員工具：開發人員可以即時跟蹤在應用中正在發生的一切，從actions到狀態的改變。
• 社區與生態圈：存在很多支援Redux的社區，使它能夠吸引更多的人來使用。

四、Redux的核心概念：

　　 Redux核心概念有三個：

• actions
• store
• reducers

　　Actions　　　　 Actions就是事件。Actions傳遞來自這個應用（使用者介面，內部事件比如API調用和表單提交）的資料給store。store只擷取來自Actions的資訊。內部Actions就是簡單的具有一個type屬性（通常是常量）的JavaScript對象，這個對象描述了action的類型以及傳遞給store的負載資訊。 核心代碼如下:　　　　Reducers　　　　在函數式JavaScript中reducer基於數組reduce方法，接收一個回調（reducer）讓你從多個值中獲得單個值，整數和，或者一個一系列值的累積。在Redux中，reducer就是獲得這個應用的目前狀態和事件然後返回一個新狀態的函數。理解reducer是怎樣工作的至關重要，因為它們完成大部分工作。這是一個非常簡單的reducer，通過擷取當前state和一個action作為參數，再返回下一個state：　　　　對於更多複雜的項目，使用Redux提供的combineReducers()執行個體是必要的（推薦）。它把在這個應用中所有的reducer結合在一起成為單個索引reducer。每一個reducer負責它自己那部分應用的狀態，這個狀態參數和其他reducer的不一樣。combineReducers()執行個體使檔案結構更容易維護。如果一個對象（state）只改變一些值，Redux就建立一個新的對象，那些沒有改變的值將會指向舊的對象而且新的值將會被建立。這對效能是極好的。為了讓它更有效率你可以添加 Immutable.js。 核心代碼如下: 　　　　Store　　　　Store對象儲存應用的狀態並提供一些協助方法來存取狀態，分髮狀態以及註冊監聽。全部state由一個store來表示。任何action通過reducer返回一個新的狀態物件。這就使得Redux非常簡單以及可預測。 核心代碼如下:　　  五、redux的安裝命令及引入　　命令：npm(cnpm) install redux --save-dev 　　引入：import {creacteStore} from "redux";　　

六、Redux的理解思路

　　1、當使用者觸發事件Actions時，dispatch(Actions)會攜帶資料給Store

　　2、當Store接受到資料時，Store會通過previousState把資料偷偷給Reducers

　　3、Reducers接收到資料之後，進行處理，處理結束之後通過newState把資料傳給Store

　　4、Store接收到Reducers返回的資料，再通過State把資料傳遞給DOM頁面，使用者就能看見自己所修改的資料了

　　特別注意的是：Reducers（1必須要有一個初始的資料；2、reducers裡面必須是一個純函數；3、state只能讀取不能修改）

  

 

　　

【※墨痕】---redux---【react】