在Day16的時候,介紹了useState這個管理、更改狀態的hook透過 count [count, setCount] = useState<numb...
大家好! 最近剛找到前端的工作,公司使用 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 並且示範他是如何簡化及整併原本的專案的,那麼今天我們就陸續將其他兩項商品也搬移進現在的專案裡面吧! 在成功的移植...
例外創造了美的價值 Oscar Niemeyer Ternary Operator 昨天提到我們要盡量避免使用到else,或許不少人心中馬上就會有疑問是:那...
什麼是 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...
接續上一篇的內容,我們已經釐清我們想做的功能,我們就用咖啡廳的例子往下開發吧。 我們先預想一下我們的咖啡廳要賣些什麼東西,可能有咖啡品項、咖啡豆、蛋糕,那麼我們...
今天的內容會以製作實際的範例為主,那麼我們先確定一下環境是否有安裝node,如果沒有的話可能要先去安裝node。(node官方連結)詳細的安裝過程,我就不再贅述...
前導 這次的主題是板上已有非常多資源的Redux,但時代在變,Redux也在變,有很多做法已經不再適合現在主流 React functional compone...
在開發時,總缺少不了 bug 的存在, 那如何 debugger 就是所有開發者都很在意的問題了, 以往開發 web 每個瀏覽器都會有相應的 devtool,...
第 28 天 ! 倒數 3 天! 當我們道路都打通後,我們要開始想要傳什麼資料進去, 首先,我們要確定要放在 redux store 的資料是什麼? 通常,我們...