通過乙個demo了解Redux

2021-09-20 07:48:18 字數 2432 閱讀 4502

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

todolist小demo 效果展示 專案位址 回到頂部 單向 資料流 資料流是我們的行為與響應的抽象 使用資料流能幫我們明確了行為對應的響應,這和react的狀態可 的思想是不謀而合的。常見的資料流框架有flux reflux redux。相比其它資料流框架,redux輕量 壓縮後只有2k 而且在...

通過乙個demo了解Redux

todolist小demo 效果展示 專案位址 單向 資料流 資料流是我們的行為與響應的抽象 使用資料流能幫我們明確了行為對應的響應,這和react的狀態可 的思想是不謀而合的。常見的資料流框架有flux reflux redux。相比其它資料流框架,redux輕量 壓縮後只有2k 而且在乙個rea...

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

1 import react,from react 2 import reactdom from react dom 3 import from redux 4 import from react redux 56 78render this props 10return 11 12 1314 15...