1. 程式人生 > >【※墨痕】---redux---【react】

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

一、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只能讀取不能修改)