Redux in NextJS RSC ver. (App Router)

https://redux.js.org/usage/nextjs

Redux 的運作在 React 18 推出 RSC ( React Server Components ) 後，有一些變動需要注意。

RSC & RCC

• 為避免 Store 受到 RSC ( React Server Components) 的 async request 污染 （例如：多個請求 racing 會導致狀態被覆蓋或干擾），Redux 對狀態的管理，在 RSC 跟 RCC （ React Client Components ）有不同機制：
  -- RSC : 每個請求都創建一個新的 Redux Store，這樣每個請求的狀態都是獨立的。
  -- RCC : Server 完成渲染後，Redux Store 會被序列化，並傳遞到 Client 端繼續使用。

工作流程

第一個階段 - Server 端：
Server 創建多個獨立 Store → Store 各自為政，負責各自的資料狀態管理 → 所有請求結束後，將狀態序列化 → 嵌入至 HTML → 發送到 client （ 此時 Server 端已不需要 Store 們 ）

第二階段 - Client 端： Client 收到序列化狀態後 → 創建 Client 端 Store → 將序列化狀態作為初始值 （ 該 Store 只有一個並且為 global ）