W24_前端框架 redux middleware 以及 SSR、Next.js、TypeScript

零、讀書計畫

1. 作業概覽

hw1：SPA 部落格加強版（W22 部落格）

• 增加刪除文章、編輯文章功能

• 把 user 存在 redux，不要用 context

• 用 redux-thunk 發 API，loading 狀態以及 response 都會存在 store 裡面。

hw2：簡答題

1. Redux middleware 是什麼？

2. CSR 跟 SSR 差在哪邊？為什麼我們需要 SSR？

3. React 提供了哪些原生的方法讓你實作 SSR？

4. 承上，除了原生的方法，有哪些現成的框架或是工具提供了 SSR 的解決方案？至少寫出兩種

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

開始時間：12/30，結束時間：1/5 總共七天

實際時間：12/30 開始，1/7 結束，總共九天

3. 讀書行動

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

實際流程：

a. MTR W24 導讀

b. 看完 [FE303] Redux 核心：Middleware

c. Redux Essentials, Part 5: Async Logic and Data Fetching，有實際示範 redux-thunk 與 call API 的結合。

d. 寫作業一

e. 寫作業二

4. 自我檢測

• P1 我知道 Redux 如何搭配 middleware 解決非同步操作的問題

• P1 我知道 CSR 與 SSR 的區別

• P2 我知道怎麼實作 SSR

• P2 我知道 Next.js 這個框架

• P3 我知道 TypeScript 與 JavaScript 的差異

5. 學前關鍵字：redux-thunk、SSR、Next.js、TypesScript

一、筆記內容

1. Redux middleware

2. Redux SPA blog 加強版

3. Redux middleware、CSR vs SSR

4. SSR vs CSR

5. Next.js

6. TypeScript

二、W23 + W24 直播檢討 23 mins

W23 + W24_直播檢討

三、心得與心態調整

這一週的學習被身體不適耽擱了，比預期的要晚了兩天才交作業，還是要好好調整一下生活。除此之外，在大量改寫的情況下，感覺有抓到一點使用 redux middelware 的手感吧，但也是被 redux 弄得暈頭轉向的，我想是必經的過程，我發現「清楚知道接下來要做什麼」，對我來說幫助很大，應該說是讀書計劃中必要的項目，如果沒有的話，我會亂七八糟不知道自己在做什麼。

延續了學習 react 的心態，對於「錯誤訊息」不再害怕也算是一個學習程式的轉捩點吧，記錄錯誤會是很好的輔助，模板會像是這樣：

1. error logs

a. 錯誤訊息：電腦跳出了什麼訊息，仔細的去閱讀

b. 描述正在進行的事件：例如說「按下按鈕後，應該會顯示 OO，可是沒有畫面」-- 能夠正確的描述問題，是解決錯誤的關鍵

c. 預期解決方案：

解決方法一：加上 console.log() 看看是否如預期的得到結果

解決方法二：回到上一個步驟，慢慢地把程式碼一行一行加上去，看哪一段錯誤

d. 開始嘗試：

嘗試一：把什麼東西改掉，出現了什麼

嘗試二：...

之前都只有三個步驟吧，就是紀錄錯誤訊息、描述問題、紀錄嘗試內容，接下來可以往「在嘗試前先思考該怎麼做，然後再去做」的方向試試看。