redux

redux

Redux由Dan Abramov在2015年創建的科技術語。是受2014年Facebook的Flux架構以及函式式程式語言Elm啟發。很快,Redux因其簡單易學體積小在短時間內成為最熱門的前端架構。

基本介紹

  • 外文名:Redux
  • 發布人:Dan Abramov
  • 創建時間:2015年
  • 屬性:前端架構
簡介,差異,優點,核心概念,Actions,Reducers,Store,

簡介

Redux對於JavaScript套用而言是一個可預測狀態的容器。換言之,它是一個套用數據流框架,而不是傳統的像underscore.js或者AngularJs那樣的庫或者框架。
Redux最主要是用作套用狀態的管理。簡言之,Redux用一個單獨的常量狀態樹(對象)保存這一整個套用的狀態,這個對象不能直接被改變。當一些數據變化了,一個新的對象就會被創建(使用actions和reducers)。

差異

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

優點

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

核心概念

Redux核心概念有三個:
  • actions
  • store
  • reducers
redux

Actions

簡單地,Actions就是事件。Actions傳遞來自這個套用(用戶接口,內部事件比如API調用和表單提交)的數據給store。store只獲取來自Actions的信息。內部Actions就是簡單的具有一個type屬性(通常是常量)的JavaScript對象,這個對象描述了action的類型以及傳遞給store的負載信息。
{    type: LOGIN_FORM_SUBMIT,    payload: {username: 'alex', password: '123456'}}
Actions通過action生成器創建,它們僅僅是是返回action的函式。
function authUser(form) {    return {        type: LOGIN_FORM_SUBMIT,        payload: form     }}
要在套用中的任何地方調用actions很容易,使用dispatch方法。
dispatch(authUser(form));

Reducers

在函式式JavaScript中reducer基於數組reduce方法,接收一個回調(reducer)讓你從多個值中獲得單個值,整數和,或者一個一系列值的累積。在Redux中,reducer就是獲得這個套用的當前狀態和事件然後返回一個新狀態的函式。理解reducer是怎樣工作的至關重要,因為它們完成大部分工作。這是一個非常簡單的reducer,通過獲取當前state和一個action作為參數,再返回下一個state:
function handleAuth(state, action) {    return _.assign({}, state, {        auth: action.payload      });}
對於更多複雜的項目,使用Redux提供的combineReducers()實例是必要的(推薦)。它把在這個套用中所有的reducer結合在一起成為單個索引reducer。每一個reducer負責它自己那部分套用的狀態,這個狀態參數和其他reducer的不一樣。combineReducers()實例使檔案結構更容易維護。
如果一個對象(state)只改變一些值,Redux就創建一個新的對象,那些沒有改變的值將會指向舊的對象而且新的值將會被創建。這對性能是極好的。為了讓它更有效率你可以添加 Immutable.js
const rootReducer = combineReducers({    handleAuth: handleAuth,    editProfile: editProfile,    changePassword: changePassword});

Store

Store對象保存套用的狀態並提供一些幫助方法來存取狀態,分髮狀態以及註冊監聽。全部state由一個store來表示。任何action通過reducer返回一個新的狀態對象。這就使得Redux非常簡單以及可預測。
import { createStore } from 'redux';let store = createStore(rootReducer);let authInfo = {username: 'alex', password: '123456'};store.dispatch(authUser(authInfo));

相關詞條

熱門詞條

聯絡我們