Redux由Dan Abramov在2015年創建的科技術語。是受2014年Facebook的Flux架構以及函式式程式語言Elm啟發。很快,Redux因其簡單易學體積小在短時間內成為最熱門的前端架構。
基本介紹
- 外文名:Redux
- 發布人:Dan Abramov
- 創建時間:2015年
- 屬性:前端架構
簡介
差異
優點
- 預測
始終有一個準確的數據源,就是store, 對於如何將actions以及套用的其他部分和當前的狀態同步可以做到絕不混亂。 - 維護
具備可預測結果的性質和嚴格的組織結構讓代碼更容易維護。 - 組織
對代碼應該如何組織更加嚴苛,這使代碼更加一致,對團隊協作更加容易。 - 測試
編寫可測試代碼的首要準則就是編寫可以僅做一件事並且獨立的小函式。Redux的代碼幾乎全部都是這樣的函式:短小、純粹、分離。 - 服務端渲染
可以帶來更好的用戶體驗並且有助於搜尋引擎最佳化,尤其是對於首次渲染。僅僅是把服務端創建的store傳遞給客戶端就可以。 - 開發者工具
開發者可以實時跟蹤在套用中正在發生的一切,從actions到狀態的改變。 - 社區與生態圈
存在很多支持Redux的社區,使它能夠吸引更多的人來使用。
核心概念
- actions
- store
- reducers
Actions
{ type: LOGIN_FORM_SUBMIT, payload: {username: 'alex', password: '123456'}}
function authUser(form) { return { type: LOGIN_FORM_SUBMIT, payload: form }}
dispatch(authUser(form));
Reducers
function handleAuth(state, action) { return _.assign({}, state, { auth: action.payload });}
const rootReducer = combineReducers({ handleAuth: handleAuth, editProfile: editProfile, changePassword: changePassword});
Store
import { createStore } from 'redux';let store = createStore(rootReducer);let authInfo = {username: 'alex', password: '123456'};store.dispatch(authUser(authInfo));