目前這個系列已挑選ChatGPT、前端&React相關章節出版成書！感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React ＆ 前端技能樹...
昨天已經看了一些RTK的基本用法，今天一樣是使用RTK繼續完成我們的購物車。雖然昨天已經完成了大部分的功能，可以把商品加入到購物車了，但是我們的商品清單目前是暫...
昨天已經先認識了Vuex和Redux這兩個狀態管理的工具了！今天則是會專注看怎麼把Redux使用到React上的部分。當我們想要在React上使用Redux時，...
在後面的幾天將會以 Redux Toolkit 來做說明，而在了解 Redux Toolkit，我們先來了解 Redux 的運作原理，在後面的操作上也會比...
今天是最後一篇了，我們接著完成我們最後的新增功能吧！ 其實新增功能與先前的部分沒有差太多，一樣我們先回到 todoApi 去處理新增的功能，如下： // sr...
前一篇我們完成了基本的 getAll request，並於畫面簡單呈現表單內容，那麼今天我們就接續完成他應該有的修改與刪除能吧！ 讓我們先回到 todoApi...
前一篇我們大致上了解了 API server 的運作與 todo 的格式，今天讓我們回歸主線，來使用 RTK query 整理我們的剛才的 todo APIs，...
前一篇我們完成了一個基本的 counter slice 和簡單的 reducer，今天我們試做 extraReducer 的部分，一樣我們簡單設定一個計分的 s...
接續前一篇的進度，我們已經設置好 store 了，接著我們來試做一個簡單的 counter 講解一下在 Typescript 的環境下如何處理我們的 slice...
什麼是 Redux Toolkit Query? Redux Toolkit Query 官方簡稱 RTK Query RTK Query 是一種進階數據獲取和...
前一篇我們已經完成大致上所有的功能了，今天篇稍微調整一下 UI 畫面，並讓我們的選單有上下頁的功能。 我們已知回傳資料內有上下頁完整的 url 了，所以我們也...
如果一路跟到這邊的話應該會覺得處理上很容易，事實上確實也是如此，因為前面的規劃已經完成了，包含非同步事件的處理，這些也就只是 javascript 的基本觀念而...
前面的章節我們完成了完整的商品進貨購買功能，是時候算個帳了! 今天就是要把錢的部分給加進來，我們可以從先前的 Redux Toolkit 的專案內搬移 ass...
前篇我們已經完成咖啡與咖啡豆兩樣商品的搬遷，今天我們將蛋糕的部分也移植過來我們 React 的專案裡面，也順便加深使用的印象。 還記得怎麼處理嗎？ Start...
前一篇，我們已經完成了咖啡商品的購買功能，以及示範了 React 的 component 拆分方法，那麼這篇我們就接續完成另一項進貨的功能吧！ 首先，我們先回...
前篇我們已經完成了基本的 Store setting，並透過 React Redux 的 provider 提供所有 component 來使用，其用意與 Re...
在整進 React 專案之前我們必須了解一件事，Redux 是可以單獨獨立運作的，這也是我們之前所做的兩個 project 驗證的結果，大家應該都不陌生，兩個...
還記得我們在原本 Redux 環境下是如何處理非同步的事件嗎？ 我們透過 redux-thunk 的套件來處理非同步的動作，那麼作為一個官方首推的套件裡，必然也...
前篇我們整併了咖啡豆的商品，今天我們來完成最後一項蛋糕的商品，那麼相信大家也不陌生了吧！ 我們就一樣先把不相關的指令給碼掉，於 ./index.js 做以下處...
前一篇我們了解了 extraReducer 的用法，並完成了咖啡商品的 slice 和 assetsSlice 裏面設定 extraReducer 綁定 cof...
前一篇我們已經完成整併了我們的每項商品，但是資金的部分我們還沒處理，像原本 redux 的做法就是靠 action type 來做標記，相同標記取不同值做不同操...
前一篇我們有介紹了 Redux toolkit 並且示範他是如何簡化及整併原本的專案的，那麼今天我們就陸續將其他兩項商品也搬移進現在的專案裡面吧！ 在成功的移植...
什麼是 Redux toolkit ? Redux Toolkit 官方的推薦使用的Redux工具，用於提高 Redux 開發。 它包含幾個實用功能，可簡化最...
上篇我們已經完成基本的redux-thunk的安裝，那麼今天我們就來設定一組簡單的資料呈現功能吧！ 這邊為了示範常用的作法我會採用 axios 來做資料的串接，...
這篇分享的主要還是以非同步的處理為主，重點會擺在 redux-thunk 的使用上，當然 redux 不是只有 redux-thunk 可以處理非同步的動作。...
回首我們目前的功能已經相對完善許多，但站在維護的角度，我們應該可以做得更好一些！ 程式語言畢竟還是語言，既然是語言，我們能做的就是讓其更加言之有物，這樣也比較方...
今天要完成的功能為我們預設的第三樣商品蛋糕部分的購買與補貨，邏輯會和前一篇有點類似，目的也是讓大家熟悉一下 redux 資料更新的流程，那麼我們開始吧！ 一樣我...
前一篇我們完成了咖啡的進貨功能，今天我們來延伸咖啡豆商品的部分，我們一樣先不複雜購買動作的複雜性，讓我們再走一次流程加深印象。 首先，先定義出 action t...
如前一篇我們已經知道如何拆分檔案，並也了解到 redux 一個完整的資料更新流程會歷經哪些步驟，那麼我們回過頭來想一下，一個咖啡廳還會有哪些動作需要擴充。 首先...
接續上一篇我們成功地建立了一個 Redux 的完整程序於 index.js 之中，那這一篇就來分享常用的分層概念，首先我們先回到這張圖上。 讓我們按著這個圖表...
一宵三筵
文科少女
Lala Wang
LucianoLee
iThome鐵人賽
看影片追技術