@redux

動態 列表
@karuru

React服務端渲染之路06——優化

所有源代碼、文檔和圖片都在 github 的倉庫裏,點擊進入倉庫 相關閲讀 React服務端渲染之路01——項目基礎架構搭建 React服務端渲染之路02——最簡單的服務端渲染 React服務端渲染之路03——路由 React服務端渲染之路04——redux-01 React服務端渲染之路05——redux-02 React服務端渲染之路06——優化 React服務端渲染之路07—

karuru 頭像

@karuru

昵稱 karuru

@juanerma

如何採用React Context & Hooks 去做全局狀態管理?

在業務或者UI交互稍微複雜一些的項目裏,都離不開狀態管理的問題。不管是從後台API請求的數據還是頁面的UI狀態,都需要有一個"Store"幫我們去做狀態管理。通常在項目中,我們會引入 Redux 去負責這樣的職責。但是 Redux 要維護大量的模板代碼,加上 Redux 通過 connect 這種高階組件的方式注入 state 和 dispatch 的方式並不直觀,增加了理解的複雜度。React從

juanerma 頭像

@juanerma

昵稱 卷兒麻

@sadhuji

從 MVC 到 Flux,從 Redux 到 Mobx

前端狀態管理的工具庫紛雜,在開啓一個新項目的時候不禁讓人糾結,該用哪個?其實每個都能達到我的目的,我們想要的無非就是管理好系統內的狀態,使代碼利於維護和拓展,儘可能降低系統的複雜度。 使用 Vue 的同學可能更願意相信其官方的生態,直接上 vuex/pinia,不用過多糾結。由於我平常使用 React 較多,故就當前應用較廣泛的 Redux、Mobx 倆工具庫為例,研讀了一番,記錄下自己的一些閒言

sadhuji 頭像

@sadhuji

昵稱 Sadhu

@risejl

Redux 簡介

Redux Store 創建 Redux 是一個狀態管理框架,可以與包括 React 在內的許多不同的 Web 技術一起使用。 在 Redux 中,有一個狀態對象負責應用程序的整個狀態, 這意味着如果有一個包含十個組件且每個組件都有自己的本地狀態的 React 項目,那麼這個項目的整個狀態將通過 Redux store 被定義為單個狀態對象, 這是學習 Redux 時要理解的第一個重要原則:Red

risejl 頭像

@risejl

昵稱 Mitchell_C

@kasong

對於“前端狀態”相關問題,如何思考比較全面

大家好,我卡頌。 最近看到個寫得很不錯的知乎回答Hooks是否過譽了?前端應該跟着React走還是跟着JS、TS走?- beeplin的回答。 在這個回答的基礎上,我想引申出一個問題 —— 對於前端狀態相關問題,如何思考比較全面? 今天,我們試着從多個抽象層級的角度回答這個問題。 歡迎加入人類高質量前端框架羣,帶飛 問題的起源 有相當比例的前端從業者入行是從學習前端框架的使用開始的。換言之,在他們

kasong 頭像

@kasong

昵稱 卡頌

@zhedan_sam_wan9

React狀態管理庫現狀

狀態管理的產生 為什麼需要狀態管理 狀態管理伴隨着現代前端框架的崛起而誕生,在經典的單頁應用中,組件內部狀態隨着組件的掛載而產生,銷燬而銷燬,全局狀態則隨着應用掛載而一直存在,這時候,全局狀態的共享,傳遞,變更就被抽離出來成了一個通用的解決方案。 Vue與React都有較為簡單的全局狀態管理策略(Store模式,Context),但是當應用足夠複雜,全局狀態較多的時候,還是需要第

zhedan_sam_wan9 頭像

@zhedan_sam_wan9

昵稱 折丹

@wubomu

再見了 Redux、Recoil、MobX、Zustand、Jotai 還有 Valtio,狀態管理還可以這樣做?

堅持在一線寫前端代碼大概有七八年了,寫過一些項目,有過一些反思,越來越確信平日裏一直用得心安理得某些的東西也許存在着問題,比如:在 狀態管理 上一直比較流行的實踐 🙏,所以試着分享出來探討一下。 為什麼要告別 Redux、Recoil、MobX、Zustand、Jotai 還有 Valtio 今天流行的狀態管理庫有很多,尤其在 React 中。為了把問題説得清晰一些,我想以 React 中的幾個

wubomu 頭像

@wubomu

昵稱 烏柏木

@daivon

基於zustand維護的一套跨框架(react/vue)跨應用的狀態管理及共享方案

zustand-pub 只要從事前端開發,不論是小程序還是web,都繞不開狀態管理。\ 眾所周知, zustand 是一套輕量、便捷、可拓展的狀態管理方案,不論國內 or 國外,都備受喜愛,star 數已接近 3W。 而 zustand-pub 則基於zustand為Iframe、微前端、Module Fedetation、模塊化、組件化等業務場景,提供跨應用、跨框架的狀態管理及狀態共享能力

daivon 頭像

@daivon

昵稱 daivon

@qingzhan

再聊 Reducer Context 和 Redux

原文鏈接 這是一次突發奇想的感悟,感覺還挺神奇的,遂記錄一下。 前言 作為一個React的開發者已經蠻久的了,大大小小的應用也開發了不少,除了一開始學習React時用過Redux以外,後來基本都不碰了,不管多麼複雜的應用,我也簡單的覺得使用Context就能夠解決我所有的問題。説來慚愧,我基本沒有思考過Redux存在的原因,可能是React真的做的太好了,又或者是我們現在的設備性能已經嚴重

qingzhan 頭像

@qingzhan

昵稱 青湛

@cshopping

C-Shopping基於Next.js,開源電商平台全新亮相

嗨,大家好!歡迎來到C-Shopping,這是一場揭開科技面紗的電商之旅。我是C-Shopping開源作者“繼小鵬”,今天將為你介紹一款基於最新技術的開源電商平台。讓我們一同探索吧! 在線體驗:http://shop.huanghanlian.com/ 項目傳送門:https://github.com/huanghanzhilian/c-shopping 如果你覺得有幫助,請給我一個Star,這

cshopping 頭像

@cshopping

昵稱 繼小鵬

@magnesium_5a22722d4b625

為什麼能用 RxJS 取代 Redux ?

RxJS 在現在的前端用比較少,但是 RxJS 作為響應式和函數式編程的集大成者,似乎被前端開發者遺忘,可能是學習難度大,可能是有更加方便的解決方案。 不是因為 Redux 更具有性價比,而是 RxJS 可以打開更大的 JS 生態空間 下面我們先回顧一下 Redux 是如何運作開始。 一、Redux 創建一個 Store 做了哪些事情? 以上是一個簡單的 Redux 的工作流。從 redu

magnesium_5a22722d4b625 頭像

@magnesium_5a22722d4b625

昵稱 進二開物

@awbeci

Next.js 14集成next-auth(v5)和redux-toolkit最佳實踐

前言 自從next.js14發佈之後,app router變成了官網主推的架構區別於pages router的傳統架構,app router更適合最新的react,於是自己動手把next-auth、redux-toolkit、ant-design、tailwindcss也一同集成進來,分享給大家,如果有錯誤之處歡迎大家指正。 操作 1、創建項目 使用下面命令創建項目,並且選擇tailwind cs

awbeci 頭像

@awbeci

昵稱 Awbeci

@kevinzhw

Redux Toolkit:簡化Redux應用狀態管理

Redux Toolkit 是官方推薦用來簡化Redux開發的工具集。它包含了一些預設的最佳實踐,使得創建和管理Redux狀態變得更簡單。 1. 創建Store 使用configureStore函數來創建Redux store,它會自動配置中間件,如redux-thunk用於處理異步操作。 import { configureStore } from '@reduxjs/toolkit';

kevinzhw 頭像

@kevinzhw

昵稱 天涯學館

@shaogongbra

duxapp放棄了redux,在duxapp中局部、全局狀態的實現方案

全局狀態 全局狀態是一個很實用的功能,例如管理用户信息,組件間狀態共享等功能都需要用到全局狀態,react有很多成熟的全局狀態管理工具,但是很多寫起來太過麻煩,duxapp提供了幾種應對不同場景的全局狀態的方案,當然如果你需要其他全局狀態,可以自行集成 局部全局狀態 這種全局狀態方案的使用場景,在於父子組件之間的狀態共享 import { contextState } from '@/duxapp

shaogongbra 頭像

@shaogongbra

昵稱 ShaoGongBra

@zhangfisher

深入解析:React中的信號組件與細粒度更新

引言 在主流的前端開發框架中,無論是React、Vue還是Svelte,核心都是圍繞着更高效地進行UI渲染展開的。 為了實現高性能,基於DOM總是比較慢這個假設前提,其最核心的要解決的問題有兩個: 響應式更新 細粒度更新 為了將響應式更新、細粒度更新優化到極致,各種框架是八仙過海,各顯神通。以最流行的React和Vue為例, 首先兩者均引入了Virtual DOM的概念。 Vue的靜

zhangfisher 頭像

@zhangfisher

昵稱 zhangfisher

@daishuyunshuzhanqianduan

redux vs redux-toolkit 及源碼實現

我們是袋鼠雲數棧 UED 團隊,致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神,探索前端道路,為社區積累並傳播經驗價值。 本文作者:霜序 前言 為何講這個內容?以為後續大家會使用 redux-toolkit,資產上週做了 redux-toolkit 的升級順便了解了相關內容,產出了這篇文章。 另外補齊一下在 React 數據流這個知識板塊的完整性。 React 中的數據流管理

daishuyunshuzhanqianduan 頭像

@daishuyunshuzhanqianduan

昵稱 袋鼠雲數棧UED