iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
自我挑戰組

30天深入淺出Redux 系列

總結一下這年來使用Redux的經驗談,也會稍微提及一些其他state management (ex: react-query, zustand...)的概念,偏向新手教學,所以不怕沒有基礎。

鐵人鍊成 | 共 31 篇文章 | 17 人訂閱 訂閱系列文 RSS系列文
DAY 21

Redux 深入淺出 - [ Day 21 ] React Redux 商品功能設定 - (蛋糕)

前篇我們已經完成咖啡與咖啡豆兩樣商品的搬遷,今天我們將蛋糕的部分也移植過來我們 React 的專案裡面,也順便加深使用的印象。 還記得怎麼處理嗎? Start...

2022-10-02 ‧ 由 LucianoLee 分享
DAY 22

Redux 深入淺出 - [ Day 22 ] React Redux 資金功能設定

前面的章節我們完成了完整的商品進貨購買功能,是時候算個帳了! 今天就是要把錢的部分給加進來,我們可以從先前的 Redux Toolkit 的專案內搬移 ass...

2022-10-03 ‧ 由 LucianoLee 分享
DAY 23

Redux 深入淺出 - [ Day 23 ] React Redux 非同步處理

如果一路跟到這邊的話應該會覺得處理上很容易,事實上確實也是如此,因為前面的規劃已經完成了,包含非同步事件的處理,這些也就只是 javascript 的基本觀念而...

2022-10-04 ‧ 由 LucianoLee 分享
DAY 24

Redux 深入淺出 - [ Day 24 ] React Redux Pokemon 換頁功能

前一篇我們已經完成大致上所有的功能了,今天篇稍微調整一下 UI 畫面,並讓我們的選單有上下頁的功能。 我們已知回傳資料內有上下頁完整的 url 了,所以我們也...

2022-10-05 ‧ 由 LucianoLee 分享
DAY 25

Redux 深入淺出 - [ Day 25 ] Redux Toolkit Query 簡介

什麼是 Redux Toolkit Query? Redux Toolkit Query 官方簡稱 RTK Query RTK Query 是一種進階數據獲取和...

2022-10-06 ‧ 由 LucianoLee 分享
DAY 26

Redux 深入淺出 - [ Day 26 ] React RTK Typescript 基本應用

接續前一篇的進度,我們已經設置好 store 了,接著我們來試做一個簡單的 counter 講解一下在 Typescript 的環境下如何處理我們的 slice...

2022-10-07 ‧ 由 LucianoLee 分享
DAY 27

Redux 深入淺出 - [ Day 27 ] React RTK Typescript ExtraReducer

前一篇我們完成了一個基本的 counter slice 和簡單的 reducer,今天我們試做 extraReducer 的部分,一樣我們簡單設定一個計分的 s...

2022-10-08 ‧ 由 LucianoLee 分享
DAY 28

Redux 深入淺出 - [ Day 28 ] React RTK Query Typescript 實作

前一篇我們大致上了解了 API server 的運作與 todo 的格式,今天讓我們回歸主線,來使用 RTK query 整理我們的剛才的 todo APIs,...

2022-10-09 ‧ 由 LucianoLee 分享
DAY 29

Redux 深入淺出 - [ Day 29 ] React RTK Query Typescript todo list (更新 & 刪除)

前一篇我們完成了基本的 getAll request,並於畫面簡單呈現表單內容,那麼今天我們就接續完成他應該有的修改與刪除能吧! 讓我們先回到 todoApi...

2022-10-10 ‧ 由 LucianoLee 分享
DAY 30

Redux 深入淺出 - [ Day 30 ] React RTK Query Typescript todo list - 新增功能 & 結語

今天是最後一篇了,我們接著完成我們最後的新增功能吧! 其實新增功能與先前的部分沒有差太多,一樣我們先回到 todoApi 去處理新增的功能,如下: // sr...

2022-10-11 ‧ 由 LucianoLee 分享