W23_前端框架 Redux 學習筆記

零、讀書計畫

1. 作業概覽：

hw1: Redux 版 Todo List

把 W21 的 todo list 改寫成 redux 版本

hw2:

1. 為什麼我們需要 Redux？

2. Redux 是什麼？可以簡介一下 Redux 的各個元件跟資料流嗎？

3. 該怎麼把 React 跟 Redux 串起來？

2. 預計花費時間：50 小時

開始時間：12/22，結束時間：12/29 總共八天

實際時間：12/22 - 12/29 總共八天 34 小時

3. 讀書行動

預計實作事項：邊看影片邊把作業二的問題回答出來

實際流程：

a. MTR W23 導讀

b. React、Flux Official introduction video

c. [FE303]「Redux 簡介」為止看完

d. 跟著影片實作一遍

這次很順利地採用上述做法，邊實作邊筆記以後，接著就是多多練習這樣，希望能夠在時間內把作業交出去。

e. 閱讀 Redux 官方文件，大概看過

4. 自我檢測

• P1 我理解 Redux 的目的以及原理

• P1 我理解 Redux 的資料流

• P1 我理解 Redux 當中各種重要元素，像是：dispatch, store, action, reducer 等等

• P1 我知道我們為什麼需要 Redux

一、筆記內容

1. React Flux Official introduction video

藉由臉書當年官方介紹影片，來理解 Flux 發展由來，MVC 框架雖然職權分明，但牽一髮而動全身、改 A 壞 B 拖累開發時間，目標是 "High quality in less time"，因此發明了 React 與 Flux 來增加「可預測性」、「易維護性」、「操作直覺」，以達成目的。

2. 那些 React 跟 Redux 在一起的日子

本文介紹了 redux 的前世今生，該怎麼使用，該怎麼跟 react 串在一起，最後小試了老朋友 todo list 新增、刪除功能。

redux 是見世面，要大人物等級的 app 才會用的，先有廣度，工作後會對某些東西有深度，似乎也不賴

3. 用 React + Redux 做一個 todo list 吧

4. Redux 介紹、如何串接 React 與 Redux

二、W23 + W24 直播檢討 23 mins

我決定上完 W24 一起看

三、心得與心態調整

心得：

redux 用在小專案有點煩瑣，一邊寫一邊碎念，蛤這裡還要這樣喔，到最後都忘了發揮客家精神要幫 react 用 memo、useCallback 那些優化手段包好包滿，不過見見世面也好。

心態：

這一次訂立讀書計畫並且有預定時間內完成，覺得還不錯，希望接下來一樣能夠順利。

下一週 W24 感覺東西不少，明天再繼續努力吧。

四、其他

Create-react-app 錯誤訊息

安裝 react-redux 時出的錯，暫時無解，目前最好解法是先裝 create-react-app 再裝 redux，這樣沒有問題。

react-redux 錯誤訊息：...is missing in props validation