iT邦幫忙

redux相關文章
共有 159 則文章
鐵人賽 自我挑戰組 DAY 26

技術 【Day26】ChatGPT請教教我:React進階(四)- useReducer、useContext vs. Redux ?

在【Day19】ChatGPT請教教我:React入門(五)- 更多Hook!useMemo!useCallback!自定義Hook!這個篇章的時候,ChatG...

鐵人賽 自我挑戰組 DAY 25

技術 【Day25】ChatGPT請教教我:React進階(三)- React Redux & Redux-thunk!API參戰!

在上兩個章節中,分別講解了「單用Redux」與「搭配Redux Toolkit」兩種redux的開發方式、語法等等 但不管是哪個,都必須遵守「reducer必須...

鐵人賽 自我挑戰組 DAY 24

技術 【Day24】ChatGPT請教教我:React進階(二)- React Redux & Redux Toolkit!

上一篇中,在建立reducer和Action的時候有那麼億…點點麻煩啊雖然說,若用建立常數變數的方式,可以維護action的type和reducer內的case...

鐵人賽 自我挑戰組 DAY 23

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 24

技術 【Day 24】跨越直系與旁系元件的全域狀態管理工具

針對狀態管理,前面有看過最基本的useState,也有看過useReducer用法,甚至還有搭配useContext,讓state可以不用再層層傳遞,但是目前為...

鐵人賽 自我挑戰組 DAY 11

技術 [Day 11] 測試思維 & 單元測試 - (7) 利用 immer.js 輕鬆建立 mock data

前言 在我們做測試的時候,常常會需要假資料來幫我們模擬真實的情境,也就是 mock data,像是 mock redux state mock api res...

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Software Development DAY 24
React框架白話文運動 系列 第 24

技術 React白話文運動24-React Redux

前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...

鐵人賽 Software Development DAY 23
React框架白話文運動 系列 第 23

技術 React白話文運動23-Flux 概念

前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...

鐵人賽 Modern Web DAY 22

技術 什麼是Flux設計、實作簡單ATM範例了解Redux三大原則feat.vanilla Javascript

本文提及以下內容 前言 flu字根 flux設計模式-單向資料流 傳統MVC所遇到的問題 flux的角色 flux優點 Redux 動機 三大原則...

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

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

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

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

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

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

鐵人賽 Modern Web DAY 18

技術 [Day18] 用 React 讓網站動起來:取用 Redux

昨天我們認識了什麼是 Redux,以及初步安裝及設定 Redux ,讓 Redux 保管的資料可以被子元件取得。今天我們要繼續學習 Redux,從子元件內取得我...

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

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

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

鐵人賽 Modern Web DAY 17

技術 [Day17] 用 React 讓網站動起來:認識 redux

前兩天介紹了 Context 這個 React 內建的狀態管理 api ,今天想來介紹一下同樣是狀態管理工具的 Redux。 Redux 是一個第三方的套件,跟...

鐵人賽 自我挑戰組 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 並且示範他是如何簡化及整併原本的專案的,那麼今天我們就陸續將其他兩項商品也搬移進現在的專案裡面吧! 在成功的移植...

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

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

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

鐵人賽 Modern Web DAY 7

技術 Day 7 - 為什麼要用 Redux

前言 今天要來談談 React 的一個好朋友,React 做為一個 view library,肯定會很希望有人幫他好好管一下 model 層級的東西,這樣合作起...

鐵人賽 自我挑戰組 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 可以處理非同步的動作。...