iT邦幫忙

redux相關文章
共有 159 則文章
鐵人賽 自我挑戰組 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 28

技術 Day28-介紹 Redux DevTools

這篇要介紹的是 Redux DevTools,是一個可以紀錄及操作存在 Redux store 內的 state 以及 dispatch action 的工具,...

鐵人賽 Modern Web DAY 26

技術 Day 26 設定 Redux 環境

第 26 天 ! 今天我們來試著把 redux 的環境建立起來吧, 安裝 redux 套件: yarn add redux redux 本身是獨立的套件,是...

鐵人賽 Modern Web DAY 25

技術 Day 25 Redux 介紹

第 25 天 ! 我們知道 redux 結構 flux-like , 那麼他的每個階段是在處理什麼? store 這是管理 redux 資料的地方, 但跟 fl...

鐵人賽 Modern Web DAY 24

技術 Day 24 Redux 簡介

第 24 天 ! 倒數一個禮拜!! 今天來介紹 Redux !! 什麼是 Redux 在官方開頭就有說了一句, 是一個可預設狀態的容器。 Redux 是參...

鐵人賽 Modern Web DAY 23

技術 [Day 23 - Redux] React + Redux = React-redux

前情提要:在前面的文章有了Redux,狀態管理沒煩惱,學到了如何在 Redux 透過 Action 管理更新所有的 State。接下來就讓我們學習如何在 Re...

鐵人賽 Modern Web DAY 22

技術 [Day 22 - Redux] 有了Redux,狀態管理沒煩惱

前情提要:在前面關於 React 的幾篇文章,學會了建立 React Component,依據使用者操作在組件間處理資料。接下來就會提到如何使用 Redux,...

鐵人賽 Modern Web DAY 16

技術 Day16-Redux 篇-認識 Redux Toolkit

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

鐵人賽 Modern Web DAY 15

技術 Day15-Redux 篇-實作範例

2022/08/03 補充 現在回來看發現自己以前寫的 Redux 還有很多要改進的地方,所以重構了一個範例,並使用了 custom hook useActio...

鐵人賽 Mobile Development DAY 13

技術 [Day13] React Native - 整理資料流,使用 Redux 吧!

Redux 官網 在還沒有加入Redux之前,資料在APP中各個view的傳遞會需要翻山越嶺,經過一個庄再到一庄: 有了 Redux 後,所有的資料就會在最上...

鐵人賽 Modern Web DAY 14

技術 Day14-Redux 篇-介紹 Redux

這篇主要會講述 Redux 的一些介紹,下篇才會開始進行實作。 Redux 是什麼? Redux 是專門管理 state 的函式庫,它可以將整個專案的 stat...

鐵人賽 Modern Web DAY 27

技術 【Day27】React Redux 原理及應用方法簡介 ╰(°ㅂ°)╯

What's Redux !? Redux 是一個用來集中管理state的一個library, 用了Redux我們可以直接取得或修改相同的state,不用再一層...

鐵人賽 Modern Web DAY 19

技術 [Day19] - MyRedux 手動製作簡易版 Redux

利用 Redux 當 React Component 中的資料發生變化時 , 告知 Vue Component 資料發生變化 make a proxy as...

技術 建立前端開發準則,讓團隊能夠有效率的開發好維護的程式碼(by 均一前端工程師宜陞)

【前言】均一的程式碼基礎 junyiacademy 從 2013 年 fork Khan Academy 原始碼,一直發展到現在,程式碼的複雜度不可同日而語...

鐵人賽 Modern Web
打通 RxJS 任督二脈 系列 第 32

技術 實戰練習 - 使用 RxJS 實作 Flux Pattern

使用 React 作為前端架構的朋友對於 Flux 應該都不陌生,React 也內建了 Flux 讓我們可以直接使用,同時也有許多其他的 library 以這個...

鐵人賽 Modern Web DAY 29

技術 【Day.29】React進階 - 以Redux Thunk處理非同步資料流

很多時候,我們的state必須要透過HTTP Request從後端取得。然而發送Request常用的fetch或是axios是非同步的。雖然我們可以透過以下方式...

鐵人賽 Modern Web DAY 28

技術 【Day.28】React進階 - 導入Redux,讓元件溝通更簡潔

當專案中的階層變複雜,state和props變的很多,資料在多層component之間的傳遞也越來越多。產生了一堆純粹用來傳遞用的props和父componen...

鐵人賽 自我挑戰組 DAY 22

技術 美好的幻覺:Frontend 前端

先分享下 Frontend 的發音https://www.youtube.com/watch?v=ZdtpKFbhTtk 記得是 Frontend 不是 Fro...

鐵人賽 Modern Web DAY 14

技術 仿Trello - 製作reducer

本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 S...

鐵人賽 Modern Web DAY 13

技術 仿Trello - 建立 Redux Store

本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 簡...

鐵人賽 Modern Web DAY 26

技術 Day 26:批改系統網頁 (8) – 利用 Redux 來進行元件之間的狀態變更

昨天我們建立了 HTTPS 連線,藉以讓使用者可以登入網站。不過雖然已經可以登入網站了,但是卻還是有登入後各個元件之間狀態無法同步資料的問題,究竟我們該如何解...

鐵人賽 Modern Web DAY 25

技術 [Day25] 語言切換-2:store架構調整

今日關鍵字:combineReducers 預想中這個App會有兩個地方需要讀取語言 剛打開App時讀取Async Storage裡讀取使用者上次使用的語系...