react 和 redux(上)

react 側重於 view,我們提到 react 就會想起 redux 這個狀態管理庫(工具),是的 react redux 和 rxjs 着三者結合使用 power 無比,看一看 netflix 是他們結合起來用的風生水起。我們今天介紹介紹一下這個精巧的 redux,第一次接觸 redux 感覺不就是觀察者模式的實現,學了學,用了用感覺沒那麼簡單,我嘗試解釋一下吧。

一切從場景出發,這是一個很常見的場景,填寫表單(一條待辦),提交表單,然後在代辦列表中多一條待辦記錄。這就是僅次於 helloworld 的 todoList 或事 todo app。

看一看我們使用 redux 是如何實現這個過程的。這裏瞭解一下 redux 幾個重要組成部分 action reducer store 吧

分析一下,填寫完表單我們會單擊【提交】按鈕,這是我們 view 發出一個 action 這個 action 需要包含兩個信息,第一個是觸發什麼事件,也就是事件類型(type),是提交事件呀還是渲染列表事件呀。第二個信息就是數據(payload),我們提交表單必定會有表單數據,就會觸發(發出) action ,然後

Reducer (接受action)就是會根據 action 的類型(什麼事件) 來更新 state ,他不是更改現有 state 而是將 state 複製出一份,然後這個state 上進行更改,返回一個新的版本的 state,State 更新了,store 就會更新視圖,完成一次操作

上代碼

定義一下 action 的 type(類型)就是 action 做了什麼事,說明用戶做了什麼操作,這樣做的好處不言而喻

然後我們定義 action 返回一個對象包含兩個信息,一個就是這個動作做了什麼,在 type 中定義,然後 payload 更新的數據

定義 action,我們就來創建一個 reducer 處理 action 根據 action的type進行不同的處理,然後更新 action 要更新的 state

最後創建我們 store store 需要 reducer 同樣我們也可以添加一些中間件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章