Redux-Persist 是一個函式庫，它的主要功能是將 Redux store 中的狀態持久化到本地儲存（如瀏覽器的 localStorage 或sessi...
今天要來實做拖曳畫面中的物件，原本我們預計是使用React-beautiful-dnd這個套件，但由於現在React 18不支援strict mode，拖曳中會...
在現代前端應用程式中，當資料流變得複雜時，狀態管理變得非常重要。Redux是一個流行的JavaScript狀態管理工具，它讓應用的狀態管理變得可預測且易於維護。...
Redux Toolkit 相關套件 必安裝套件: redux-toolkit : 簡化 Redux 的使用，讓開發者能更輕鬆地管理狀態和減少樣板程式碼，並且...
目前這個系列已挑選ChatGPT、前端&React相關章節出版成書！感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React ＆ 前端技能樹...
例外創造了美的價值 Oscar Niemeyer Ternary Operator 昨天提到我們要盡量避免使用到else，或許不少人心中馬上就會有疑問是：那...
大家好! 最近剛找到前端的工作，公司使用 React 作為主要的開發框架，並且使用 Redux 作為狀態管理的工具，最近正在學習這一塊，在這邊紀錄一下學習到的東...
今天是最後一篇了，我們接著完成我們最後的新增功能吧！ 其實新增功能與先前的部分沒有差太多，一樣我們先回到 todoApi 去處理新增的功能，如下： // sr...
前一篇我們已經完成大致上所有的功能了，今天篇稍微調整一下 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 之中，那這一篇就來分享常用的分層概念，首先我們先回到這張圖上。 讓我們按著這個圖表...
接續上一篇內容，繼續往下實作 Reducer function 吧！ 讓我們來複習一下第一篇的觀念，Reducer 有幾個原則必須注意： 只會根據傳入的sta...
接續上一篇的內容，我們已經釐清我們想做的功能，我們就用咖啡廳的例子往下開發吧。 我們先預想一下我們的咖啡廳要賣些什麼東西，可能有咖啡品項、咖啡豆、蛋糕，那麼我們...
ntuedtd113
Jaren
一宵三筵
Ryvn's Boss
LucianoLee
iThome鐵人賽
看影片追技術