通過乙個demo了解Redux

todolist小demo

效果展示

專案位址

(單向)資料流

資料流是我們的行為與響應的抽象；使用資料流能幫我們明確了行為對應的響應，這和react的狀態可**的思想是不謀而合的。

常見的資料流框架有flux/reflux/redux。相比其它資料流框架，redux輕量(壓縮後只有2k),而且在乙個react專案中，redux維護了單一的狀態樹。

下面我們來具體看看為什麼要使用資料流

不只是前端，很多系統開發的時候遵從的都是mvc分離，也就是資料放在model裡面，view來控制顯示，controler做整體的管理。但是隨著系統的龐大，它會產生一系列問題。比如舉個例子，我們上網shopping，提交訂單，那麼使用者的賬號，優惠資訊，物流資訊，庫存等等的model都會發生更新變化，然後view上的顯示也會隨之變化，反過來，view的有些變化也會對model產生影響，這樣就使使用者下了乙個訂單以後介面會變得什麼樣變得不可**。

所以在react出現的同時facebook也搞出了乙個flux資料流(react是純v層框架，需要資料流進行支撐)，它的思想如下:

它認為使用者有各種各樣的action,然後所有的action由乙個統一的dispacher分發到若干個store裡去，這個store儲存著資料也儲存著頁面的狀態，根據資料和頁面的狀態，乙個store只能向檢視層傳遞資訊，而不允許檢視層再返回來作用到store上，然後檢視就發生更新，然後再由使用者傳入新的操作。這樣子我們就能**到action作用到store上時，view發生什麼變化。

那redux是flux的一種實現方法，但是也有些許不一樣，它的思想如下

當頁面渲染完，ui就出現了，然後使用者觸發ui上的action，然後action被送到reducer這個方法裡去，然後reducer更新了store，store裡包含react開發的state，最後state決定ui層的展現。這就是redux的乙個完整過程。

react-redux安裝:

npm install react-redux redux

redux本身就是乙個工具流，而react-redux則是對redux的繫結。類似的還有ng2-redux、backbone-redux等

專案結構

四個重要的資料夾：

-- actions：行為

-- components：元件

-- container：元件

-- reducer：store裡分發action的方法

- index.html：模板檔案

- server.js

- webpack

下面對各個部分進行舉例（乙個簡單的待辦項小demo）：

action:(1.是行為的抽象；2.是普通js物件；3.一般由方法生成；4.必須有乙個type)

const addtodo = (text) = >
}

reducer:(1.是響應的抽象；2.純方法（非存方法是指比如依賴當前的時間）)

/* 傳入舊的state和作用的action返回乙個新state */
const todo = (state, action) =>
case 'toggle_todo':
if (state.id !==action.id) 
return
object.assign({}, state, )
default
: 
return
state
}}

store:(1.action作用於store；2.reducer根據store響應；3.對於redux來說，store是唯一的；4.store包括了完整的state；5.state完全可**)

列印store：

元件：

通過乙個demo了解Redux

通過乙個demo了解Redux

通過乙個demo了解Redux

乙個超級簡單的demo帶你走進redux的大坑

相關推薦