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 同樣我們也可以新增一些中介軟體
