W23_前端框架 Redux 學習筆記


Posted by Christy on 2021-12-29

零、讀書計畫

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 用 memouseCallback 那些優化手段包好包滿,不過見見世面也好。

心態:

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

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

四、其他

Create-react-app 錯誤訊息

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

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










Related Posts

Option API#watch 以及 computed

Option API#watch 以及 computed

Python 字典 dict 和集合 set 入門教學

Python 字典 dict 和集合 set 入門教學

Day 15 - 使用 zsh 的 alias 讓指令縮短

Day 15 - 使用 zsh 的 alias 讓指令縮短


Comments