iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 1 留言 11663 瀏覽

鐵人賽 Modern Web DAY 16

用30天更加認識 React.js 這個好朋友系列第 16 篇

技術 Day16-Redux 篇-認識 Redux Toolkit

在這篇文章中，我們要來認識一個函式庫: Redux Toolkit。 Redux Toolkit 官網 Redux Toolkit 是什麼? 不知道讀者有沒有感...

harry xie ‧ 2021-09-30

5 Like 1 留言 11415 瀏覽

鐵人賽自我挑戰組 DAY 1

30天深入淺出Redux 系列第 1 篇

技術 Redux 深入淺出 - [ Day 1 ] Redux 簡介

前導這次的主題是板上已有非常多資源的Redux，但時代在變，Redux也在變，有很多做法已經不再適合現在主流 React functional compone...

LucianoLee ‧ 2022-09-12

1 Like 1 留言 4438 瀏覽

鐵人賽 Modern Web DAY 17

用30天更加認識 React.js 這個好朋友系列第 17 篇

技術 Day17-Redux 篇-用 Redux Toolkit 實作範例

在第 15 天的文章中我們做了一個範例，現在我們要用 Redux Toolkit 去改寫它。第一步我們將原本範例的 store 和 reducer 做改寫。...

harry xie ‧ 2021-10-01

0 Like 0 留言 3300 瀏覽

鐵人賽自我挑戰組 DAY 25

30天深入淺出Redux 系列第 25 篇

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

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

LucianoLee ‧ 2022-10-06

0 Like 0 留言 2839 瀏覽

鐵人賽自我挑戰組 DAY 14

30天深入淺出Redux 系列第 14 篇

技術 Redux 深入淺出 - [ Day 14 ] Redux Toolkit ExtraReducer

前一篇我們已經完成整併了我們的每項商品，但是資金的部分我們還沒處理，像原本 redux 的做法就是靠 action type 來做標記，相同標記取不同值做不同操...

LucianoLee ‧ 2022-09-25

0 Like 0 留言 2781 瀏覽

鐵人賽自我挑戰組 DAY 3

30天深入淺出Redux 系列第 3 篇

技術 Redux 深入淺出 - [ Day 3 ] Action & Action creator

接續上一篇的內容，我們已經釐清我們想做的功能，我們就用咖啡廳的例子往下開發吧。我們先預想一下我們的咖啡廳要賣些什麼東西，可能有咖啡品項、咖啡豆、蛋糕，那麼我們...

LucianoLee ‧ 2022-09-14

1 Like 0 留言 2721 瀏覽

鐵人賽自我挑戰組 DAY 2

30天深入淺出Redux 系列第 2 篇

技術 Redux 深入淺出 - [ Day 2 ] Project setup

今天的內容會以製作實際的範例為主，那麼我們先確定一下環境是否有安裝node，如果沒有的話可能要先去安裝node。(node官方連結)詳細的安裝過程，我就不再贅述...

LucianoLee ‧ 2022-09-13

0 Like 0 留言 2644 瀏覽

鐵人賽自我挑戰組 DAY 24

用ChatGPT詠唱來完成工作與點亮前後端技能樹系列第 24 篇

技術【Day24】ChatGPT請教教我：React進階（二）- React Redux & Redux Toolkit！

目前這個系列已挑選ChatGPT、前端&React相關章節出版成書！感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React ＆前端技能樹...

一宵三筵 ‧ 2023-10-08

0 Like 0 留言 2443 瀏覽

鐵人賽自我挑戰組 DAY 4

30天深入淺出Redux 系列第 4 篇

技術 Redux 深入淺出 - [ Day 4 ] Reducer & Store

接續上一篇內容，繼續往下實作 Reducer function 吧！讓我們來複習一下第一篇的觀念，Reducer 有幾個原則必須注意：只會根據傳入的sta...

LucianoLee ‧ 2022-09-15

0 Like 0 留言 2145 瀏覽

鐵人賽自我挑戰組 DAY 12

30天深入淺出Redux 系列第 12 篇

技術 Redux 深入淺出 - [ Day 12 ] Redux Toolkit 簡介

什麼是 Redux toolkit ? Redux Toolkit 官方的推薦使用的Redux工具，用於提高 Redux 開發。它包含幾個實用功能，可簡化最...

LucianoLee ‧ 2022-09-23

0 Like 0 留言 2114 瀏覽

鐵人賽自我挑戰組 DAY 13

30天深入淺出Redux 系列第 13 篇

技術 Redux 深入淺出 - [ Day 13 ] Redux Toolkit Slice

前一篇我們有介紹了 Redux toolkit 並且示範他是如何簡化及整併原本的專案的，那麼今天我們就陸續將其他兩項商品也搬移進現在的專案裡面吧！在成功的移植...

LucianoLee ‧ 2022-09-24

0 Like 0 留言 2110 瀏覽

鐵人賽自我挑戰組 DAY 5

30天深入淺出Redux 系列第 5 篇

技術 Redux 深入淺出 - [ Day 5 ] 檔案拆分

接續上一篇我們成功地建立了一個 Redux 的完整程序於 index.js 之中，那這一篇就來分享常用的分層概念，首先我們先回到這張圖上。讓我們按著這個圖表...

LucianoLee ‧ 2022-09-16

0 Like 1 留言 2085 瀏覽

鐵人賽自我挑戰組 DAY 30

30天深入淺出Redux 系列第 30 篇

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

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

LucianoLee ‧ 2022-10-11

1 Like 0 留言 2027 瀏覽

鐵人賽自我挑戰組 DAY 17

30天深入淺出Redux 系列第 17 篇

技術 Redux 深入淺出 - [ Day 17 ] Redux Toolkit asyncThunk 非同步範例

還記得我們在原本 Redux 環境下是如何處理非同步的事件嗎？我們透過 redux-thunk 的套件來處理非同步的動作，那麼作為一個官方首推的套件裡，必然也...

LucianoLee ‧ 2022-09-28

1 Like 0 留言 1976 瀏覽

鐵人賽自我挑戰組 DAY 29

30天深入淺出Redux 系列第 29 篇

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

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

LucianoLee ‧ 2022-10-10

0 Like 0 留言 1898 瀏覽

鐵人賽自我挑戰組 DAY 18

30天深入淺出Redux 系列第 18 篇

技術 Redux 深入淺出 - [ Day 18 ] React Redux 簡介

在整進 React 專案之前我們必須了解一件事，Redux 是可以單獨獨立運作的，這也是我們之前所做的兩個 project 驗證的結果，大家應該都不陌生，兩個...

LucianoLee ‧ 2022-09-29

0 Like 0 留言 1775 瀏覽

鐵人賽自我挑戰組 DAY 7

30天深入淺出Redux 系列第 7 篇

技術 Redux 深入淺出 - [ Day 7 ] 範例商品 - 咖啡豆

前一篇我們完成了咖啡的進貨功能，今天我們來延伸咖啡豆商品的部分，我們一樣先不複雜購買動作的複雜性，讓我們再走一次流程加深印象。首先，先定義出 action t...

LucianoLee ‧ 2022-09-18

0 Like 0 留言 1752 瀏覽

鐵人賽 Modern Web DAY 26

你 React 了嗎? 30 天解鎖 React 技能系列第 26 篇

技術 [DAY 26] Redux 原理與 Redux Toolkit

在後面的幾天將會以 Redux Toolkit 來做說明，而在了解 Redux Toolkit，我們先來了解 Redux 的運作原理，在後面的操作上也會比...

Lala Code ‧ 2022-10-11

0 Like 0 留言 1710 瀏覽

鐵人賽自我挑戰組 DAY 11

30天深入淺出Redux 系列第 11 篇

技術 Redux 深入淺出 - [ Day 11 ] Redux-thunk 非同步 Action

上篇我們已經完成基本的redux-thunk的安裝，那麼今天我們就來設定一組簡單的資料呈現功能吧！這邊為了示範常用的作法我會採用 axios 來做資料的串接，...

LucianoLee ‧ 2022-09-22

0 Like 0 留言 1699 瀏覽

鐵人賽自我挑戰組 DAY 15

30天深入淺出Redux 系列第 15 篇

技術 Redux 深入淺出 - [ Day 15 ] Redux Toolkit ExtraReducer 整理咖啡豆

前一篇我們了解了 extraReducer 的用法，並完成了咖啡商品的 slice 和 assetsSlice 裏面設定 extraReducer 綁定 cof...

LucianoLee ‧ 2022-09-26

0 Like 0 留言 1634 瀏覽

鐵人賽自我挑戰組 DAY 27

30天深入淺出Redux 系列第 27 篇

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

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

LucianoLee ‧ 2022-10-08

0 Like 0 留言 1596 瀏覽

鐵人賽自我挑戰組 DAY 10

30天深入淺出Redux 系列第 10 篇

技術 Redux 深入淺出 - [ Day 10 ] Redux-thunk 簡介

這篇分享的主要還是以非同步的處理為主，重點會擺在 redux-thunk 的使用上，當然 redux 不是只有 redux-thunk 可以處理非同步的動作。...

LucianoLee ‧ 2022-09-21

0 Like 0 留言 1554 瀏覽

鐵人賽自我挑戰組 DAY 26

30天深入淺出Redux 系列第 26 篇

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

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

LucianoLee ‧ 2022-10-07

0 Like 0 留言 1489 瀏覽

鐵人賽自我挑戰組 DAY 6

30天深入淺出Redux 系列第 6 篇

技術 Redux 深入淺出 - [ Day 6 ] 範例功能擴充

如前一篇我們已經知道如何拆分檔案，並也了解到 redux 一個完整的資料更新流程會歷經哪些步驟，那麼我們回過頭來想一下，一個咖啡廳還會有哪些動作需要擴充。首先...

LucianoLee ‧ 2022-09-17

1 Like 0 留言 1434 瀏覽

鐵人賽 Modern Web DAY 26

從Vue學React！不只要會用，還要真的懂～系列第 26 篇

技術【Day 26】用實作學Redux Toolkit！完成一個購物車(下) - Middleware之處理非同步的操作

昨天已經看了一些RTK的基本用法，今天一樣是使用RTK繼續完成我們的購物車。雖然昨天已經完成了大部分的功能，可以把商品加入到購物車了，但是我們的商品清單目前是暫...

文科少女 ‧ 2023-10-02 ‧團隊曼陀號計畫V

0 Like 0 留言 1408 瀏覽

鐵人賽自我挑戰組 DAY 8

30天深入淺出Redux 系列第 8 篇

技術 Redux 深入淺出 - [ Day 8 ] 範例商品 - 蛋糕

今天要完成的功能為我們預設的第三樣商品蛋糕部分的購買與補貨，邏輯會和前一篇有點類似，目的也是讓大家熟悉一下 redux 資料更新的流程，那麼我們開始吧！一樣我...

LucianoLee ‧ 2022-09-19

0 Like 0 留言 1377 瀏覽

鐵人賽自我挑戰組 DAY 28

30天深入淺出Redux 系列第 28 篇

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

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

LucianoLee ‧ 2022-10-09

0 Like 0 留言 1364 瀏覽

鐵人賽自我挑戰組 DAY 9

30天深入淺出Redux 系列第 9 篇

技術 Redux 深入淺出 - [ Day 9 ] Reducer 的拆分

回首我們目前的功能已經相對完善許多，但站在維護的角度，我們應該可以做得更好一些！程式語言畢竟還是語言，既然是語言，我們能做的就是讓其更加言之有物，這樣也比較方...

LucianoLee ‧ 2022-09-20

0 Like 0 留言 1330 瀏覽

鐵人賽自我挑戰組 DAY 22

30天深入淺出Redux 系列第 22 篇

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

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

LucianoLee ‧ 2022-10-03

0 Like 1 留言 1248 瀏覽

鐵人賽自我挑戰組 DAY 23

30天深入淺出Redux 系列第 23 篇

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

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

LucianoLee ‧ 2022-10-04