更新 week23 與 week24 作業跟課綱

README.md

@@ -828,21 +828,26 @@ React 在 2019 年 2 月推出 v16.8 這個版本，做了一個很大的改動
 
 經過時間的演進，當初最早的 flux 架構經過社群的改良以後變成了各個 library，有著各種實作，而以 React 來說，最有名的就是一套叫做 Redux 的 library。
 
-這一週會接續之前的課程，讓你的 Web App 變得更加完整，並且導入 Redux，以及說明我們為什麼需要它。
-
-指定教材：
-
-1. [FE303] React 的好夥伴：Redux（還在做）
-
-上面這課程主要會稍微介紹 flux 以及這次的重點 redux。
-
 雖然說 redux 與 flux 長得不太一樣，但我認為能理解 flux 的話有助於理解 redux，所以可以參考：
 
 1. [Flux: In-Depth Overview](https://facebook.github.io/flux/docs/in-depth-overview/)，這是官方當初推出 flux 時候的影片，很值得參考，也有講到 React 可以當做複習
 2. [Flux For Beginners](https://blog.andrewray.me/flux-for-stupid-people/)，淺顯易懂的教學
 3. [React/Flux in Action 實戰經驗分享](https://speakerdeck.com/coodoo/flux-in-action-shi-zhan-jing-yan-fen-xiang)，當初我入門時幫助我很多的投影片
 4. [從 Flux 與 MVC 的差異來簡介 Flux](https://blog.techbridge.cc/2016/04/29/introduce-flux-from-flux-and-mvc/)
 
+指定教材：
+
+1. [Redux 官方文件](https://redux.js.org/introduction/getting-started)
+2. [FE303] React 的好夥伴：Redux（看到 「實作簡易 todo list 結束就好」）
+
+Redux 的官方文件前陣子剛重寫過，我覺得寫得很棒，把 Redux 的許多重點講得十分清楚，因此我推薦大家從官方文件開始學習，除了這資源很棒以外，另一方面也是提前體驗「完全自學」的狀況。
+
+如果英文不太好，這邊也有舊版官方文件的中文版（只是跟新版差很多就是了）：
+
+1. [Redux 舊版文件中文版（2016 年）](https://chentsulin.github.io/redux/index.html)
+
+除了官方文件以外，也可以跟上面的課程穿插著看，應該能夠增進理解程度。
+
 如果你還有時間，可以參考第二期講解 redux 的影片：
 
 1. [程式導師實驗計畫第二期：Week14-1 Redux](https://www.youtube.com/watch?v=CrjEYMnix_8&fbclid=IwAR1Cy-0cw44dnMTExzzenmM3vTzWuTxxs4TpSV01wf29qb7m2rx0_ttRQ8M&ab_channel=Lidemy%E9%8B%B0%E5%AD%B8%E9%99%A2)
@@ -855,29 +860,36 @@ React 在 2019 年 2 月推出 v16.8 這個版本，做了一個很大的改動
 - [ ] P1 我理解 Redux 的資料流
 - [ ] P1 我理解 Redux 當中各種重要元素，像是：dispatch, store, action, reducer 等等
 - [ ] P1 我知道我們為什麼需要 Redux
-- [ ] P1 我知道 Redux 如何搭配 middleware 解決非同步操作的問題
 
 ### 第二十四週（11/23 ~ 11/29）：前端框架（四）
 
-在上一週其實就已經把主要的課程都講完了，這一週主要是做一些額外的補充，幫大家補充幾個重要的議題，但是礙於課程時間所以沒有提到的，像是：
+在上一週其實就已經把主要的課程都講完了，只剩下一個東西，那就是 redux middleware，這其實是在 redux 中相當重要的一個概念，因此本週的作業也會以這個為主。
 
-1. SSR 該怎麼做？為什麼需要 SSR
+除此之外，這一週也會做一些額外的補充，幫大家補充幾個重要的議題，像是：
+
+1. 為什麼需要 SSR？SSR 該怎麼做？
 2. Next.js 框架介紹
 3. TypeScript 簡介
 
-作業的部分會由我先寫好一個模板給大家，只有純 UI 而已，並且附上一個假的 mock API server，可以透過一個假造出來的 API server 拿取資料，而你的任務就是把這個專案的功能給完成。
-
 指定教材：
 
-1. MTR04 上的課程（還在做）
-2. [React SSR | 從零開始實作 SSR — 基礎篇](https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/server-side-rendering-ssr-in-reactjs-part1-d2a11890abfc)
-3. [React | 用實作了解 Server-Side Rendering 的運作原理](https://medium.com/starbugs/react-%E7%94%A8%E5%AF%A6%E4%BD%9C%E4%BA%86%E8%A7%A3-server-side-rendering-%E7%9A%84%E9%81%8B%E4%BD%9C%E5%8E%9F%E7%90%86-c6133d9fb30d)
-4. [跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR](https://hulitw.medium.com/introduction-mvc-spa-and-ssr-545c941669e9)
+先把 [FE303] React 的好夥伴：Redux 全部看完，學習如何使用 redux-thunk，然後就可以開始做作業了。
+
+也非常推薦去看：[Redux Essentials, Part 5: Async Logic and Data Fetching#](https://redux.js.org/tutorials/essentials/part-5-async-logic)，有實際示範 redux-thunk 與 call API 的結合。
+
+再來看 Lidemy 上面 MTR04 裡的補充課程，學習 SSR, Next.js 以及 TypesScript 的基礎概念。
+
+同時也可以透過以下幾篇文章更理解 SSR，甚至是跟著文章一起實作看看：
+
+1. [React SSR | 從零開始實作 SSR — 基礎篇](https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/server-side-rendering-ssr-in-reactjs-part1-d2a11890abfc)
+2. [React | 用實作了解 Server-Side Rendering 的運作原理](https://medium.com/starbugs/react-%E7%94%A8%E5%AF%A6%E4%BD%9C%E4%BA%86%E8%A7%A3-server-side-rendering-%E7%9A%84%E9%81%8B%E4%BD%9C%E5%8E%9F%E7%90%86-c6133d9fb30d)
+3. [跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR](https://hulitw.medium.com/introduction-mvc-spa-and-ssr-545c941669e9)
 
 [HW24 作業連結](/homeworks/week24)
 
 #### 自我檢測
 
+- [ ] P1 我知道 Redux 如何搭配 middleware 解決非同步操作的問題
 - [ ] P1 我知道 CSR 與 SSR 的區別
 - [ ] P2 我知道怎麼實作 SSR
 - [ ] P2 我知道 Next.js 這個框架

examples/week23/README.md

@@ -12,4 +12,8 @@
 
 然後 react-redux 就是把 Redux 的 state 給自動綁定到 component 的 props，也順便把 dispatch 一起傳進去，把 React 跟 Redux 給綁在一起，這樣才能使用。
 
+## 好文推薦
 
+1. [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
+
+另外 Redux 官方文件真的很讚，把它認真看完你對 Redux 的理解會超越我（或是差我一點點啦）

homeworks/week23/README.md

@@ -1,20 +1,17 @@
 # 作業
 
-## hw1：SPA 部落格加強版
+## hw1：Redux 版 Todo List
 
-上週的作業我們做了一個簡單的部落格，而這週的作業會延續上一週，繼續加強它的功能。
+沒錯，大家又愛又恨的 todo list 又出現了，而且是在這課程裡面最後一次出現了！
 
-我們需要增加的功能有：
+在 redux 的課程中我有示範了如何用 redux 來實作新增以及刪除 todo 這兩個功能，而這週的作業呢，就是要你把 week21 寫的 todo list 改寫成用 redux 來實作！
 
-1. 刪除文章
-2. 編輯文章
+所以你的 filter 跟 todos 都會存在 redux store 裡面，如果做不出來或是沒有想法，可以參考[官方教學](https://react-redux.js.org/introduction/basic-tutorial)。
 
-除了增加這兩個功能以外，我們原本 user 的資料是存在 context，這週的作業要請你把 context 拔掉，改用 redux 來存這個資訊。所以資料的更新也必須透過 redux。
-
-除此之外，在發 API 的部分我們原本是在 component 裡面直接用 fetch，現在請你改用 redux-thunk 來完成，所以 API 的 loading 狀態以及 response 都會存在 store 裡面。
+另外提醒大家一件事，用了 redux 不代表你需要把所有 state 都放到 redux store 裡面去，像是我在示範 add todo 功能時，input 的 value 就是放在 component state 而不是 redux store，通常只有需要被其他元件共用到的狀態會放到 store 裡面去。
 
 ## hw2：簡答題
 
 1. 為什麼我們需要 Redux？
 2. Redux 是什麼？可以簡介一下 Redux 的各個元件跟資料流嗎？
-3. Redux middleware 是什麼？
+3. 該怎麼把 React 跟 Redux 串起來？

homeworks/week23/hw2.md

@@ -4,5 +4,5 @@
 ## Redux 是什麼？可以簡介一下 Redux 的各個元件跟資料流嗎？
 
 
-## Redux middleware 是什麼？
+## 該怎麼把 React 跟 Redux 串起來？
 

homeworks/week24/README.md

@@ -1,11 +1,21 @@
 # 作業
 
-## hw1：待定
+## hw1：SPA 部落格加強版
 
-TBD
+之前的作業我們有做了一個簡單的部落格，而這週的作業會繼續加強它的功能。
+
+我們需要增加的功能有：
+
+1. 刪除文章
+2. 編輯文章
+
+除了增加這兩個功能以外，我們原本 user 的資料是存在 context，這週的作業要請你把 context 拔掉，改用 redux 來存這個資訊。所以資料的更新也必須透過 redux。
+
+除此之外，在發 API 的部分我們原本是在 component 裡面直接用 fetch，現在請你改用 redux-thunk 來完成，所以 API 的 loading 狀態以及 response 都會存在 store 裡面。
 
 ## hw2：簡答題
 
-1. CSR 跟 SSR 差在哪邊？為什麼我們需要 SSR？
-2. React 提供了哪些原生的方法讓你實作 SSR？
-3. 承上，除了原生的方法，有哪些現成的框架或是工具提供了 SSR 的解決方案？至少寫出兩種
+1. Redux middleware 是什麼？
+2. CSR 跟 SSR 差在哪邊？為什麼我們需要 SSR？
+3. React 提供了哪些原生的方法讓你實作 SSR？
+4. 承上，除了原生的方法，有哪些現成的框架或是工具提供了 SSR 的解決方案？至少寫出兩種

homeworks/week24/hw2.md

@@ -1,3 +1,6 @@
+## Redux middleware 是什麼？
+
+
 ## CSR 跟 SSR 差在哪邊？為什麼我們需要 SSR？