iT邦幫忙

react-redux相關文章
共有 53 則文章
鐵人賽 自我挑戰組 DAY 23

技術 【Day23】ChatGPT請教教我:React進階(一)- React Redux 狀態管理

在Day16的時候,介紹了useState這個管理、更改狀態的hook透過 count [count, setCount] = useState<numb...

技術 【學習筆記】Redux - 基本: Actions & Reducer

大家好! 最近剛找到前端的工作,公司使用 React 作為主要的開發框架,並且使用 Redux 作為狀態管理的工具,最近正在學習這一塊,在這邊紀錄一下學習到的東...

鐵人賽 自我挑戰組 DAY 30
30天深入淺出Redux 系列 第 30

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

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

鐵人賽 自我挑戰組 DAY 24
30天深入淺出Redux 系列 第 24

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

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

鐵人賽 自我挑戰組 DAY 23
30天深入淺出Redux 系列 第 23

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

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

鐵人賽 自我挑戰組 DAY 22
30天深入淺出Redux 系列 第 22

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

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

鐵人賽 自我挑戰組 DAY 21
30天深入淺出Redux 系列 第 21

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

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

鐵人賽 自我挑戰組 DAY 20
30天深入淺出Redux 系列 第 20

技術 Redux 深入淺出 - [ Day 20 ] React Redux 商品功能設定-(咖啡&咖啡豆)

前一篇,我們已經完成了咖啡商品的購買功能,以及示範了 React 的 component 拆分方法,那麼這篇我們就接續完成另一項進貨的功能吧! 首先,我們先回...

鐵人賽 自我挑戰組 DAY 19
30天深入淺出Redux 系列 第 19

技術 Redux 深入淺出 - [ Day 19 ] React Redux setup

前篇我們已經完成了基本的 Store setting,並透過 React Redux 的 provider 提供所有 component 來使用,其用意與 Re...

鐵人賽 自我挑戰組 DAY 18
30天深入淺出Redux 系列 第 18

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

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

鐵人賽 自我挑戰組 DAY 17
30天深入淺出Redux 系列 第 17

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

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

鐵人賽 自我挑戰組 DAY 16
30天深入淺出Redux 系列 第 16

技術 Redux 深入淺出 - [ Day 16 ] Redux Toolkit ExtraReducer 整理蛋糕

前篇我們整併了咖啡豆的商品,今天我們來完成最後一項蛋糕的商品,那麼相信大家也不陌生了吧! 我們就一樣先把不相關的指令給碼掉,於 ./index.js 做以下處...

鐵人賽 自我挑戰組 DAY 15
30天深入淺出Redux 系列 第 15

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

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

鐵人賽 自我挑戰組 DAY 14
30天深入淺出Redux 系列 第 14

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

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

鐵人賽 自我挑戰組 DAY 13
30天深入淺出Redux 系列 第 13

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

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

鐵人賽 Modern Web DAY 10

技術 驚喜:Ternary與Switch

例外創造了美的價值 Oscar Niemeyer Ternary Operator 昨天提到我們要盡量避免使用到else,或許不少人心中馬上就會有疑問是:那...

鐵人賽 自我挑戰組 DAY 12
30天深入淺出Redux 系列 第 12

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

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

鐵人賽 自我挑戰組 DAY 11
30天深入淺出Redux 系列 第 11

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

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

鐵人賽 自我挑戰組 DAY 10
30天深入淺出Redux 系列 第 10

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

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

鐵人賽 自我挑戰組 DAY 9
30天深入淺出Redux 系列 第 9

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

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

鐵人賽 自我挑戰組 DAY 8
30天深入淺出Redux 系列 第 8

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

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

鐵人賽 自我挑戰組 DAY 7
30天深入淺出Redux 系列 第 7

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

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

鐵人賽 自我挑戰組 DAY 6
30天深入淺出Redux 系列 第 6

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

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

鐵人賽 自我挑戰組 DAY 5
30天深入淺出Redux 系列 第 5

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

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

鐵人賽 自我挑戰組 DAY 4
30天深入淺出Redux 系列 第 4

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

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

鐵人賽 自我挑戰組 DAY 3
30天深入淺出Redux 系列 第 3

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

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

鐵人賽 自我挑戰組 DAY 2
30天深入淺出Redux 系列 第 2

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

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

鐵人賽 自我挑戰組 DAY 1
30天深入淺出Redux 系列 第 1

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

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

鐵人賽 Modern Web

技術 Day 31 DEV TOOL

在開發時,總缺少不了 bug 的存在, 那如何 debugger 就是所有開發者都很在意的問題了, 以往開發 web 每個瀏覽器都會有相應的 devtool,...

鐵人賽 Modern Web DAY 28

技術 Day 28 加入 Action

第 28 天 ! 倒數 3 天! 當我們道路都打通後,我們要開始想要傳什麼資料進去, 首先,我們要確定要放在 redux store 的資料是什麼? 通常,我們...