Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
基于Redux的模块化设计
Search
JSConf China
October 20, 2019
Programming
0
27
基于Redux的模块化设计
Chinese version
For JSConf China 2019
By 林长青
JSConf China
October 20, 2019
Tweet
Share
More Decks by JSConf China
See All by JSConf China
Redux Based Modular Design
jsconfchina
0
17
Builing (Progressive) Web Apps
jsconfchina
0
20
Other Decks in Programming
See All in Programming
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
9.9k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
4
7.1k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
技術同人誌をMCP Serverにしてみた
74th
1
640
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
470
Discover Metal 4
rei315
2
130
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
320
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
XP, Testing and ninja testing
m_seki
3
240
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
How to Ace a Technical Interview
jacobian
277
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
What's in a price? How to price your products and services
michaelherold
246
12k
Unsuck your backbone
ammeep
671
58k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Cult of Friendly URLs
andyhume
79
6.5k
Fireside Chat
paigeccino
37
3.5k
Transcript
基于Redux的模块化 设计 Michael Lin 林长青
2 | © 2019 RingCentral, Inc. All rights reserved. 动机
01 解决方案 03 Redux 缺点 02 Demo 04
3 | © 2019 RingCentral, Inc. All rights reserved. 如何构建基于Redux
大型应用?
4 | © 2019 RingCentral, Inc. All rights reserved. 构建大型应用
模块化 UI 组件 ?
5 | © 2019 RingCentral, Inc. All rights reserved. •
Redux 样板代码 Combine Reducers Middleware Connector Action Type
6 | © 2019 RingCentral, Inc. All rights reserved. 模块化
难点 核心业务逻辑与UI分离 模块化状态管理 优点 协作 分治 持续交付和产品迭代 更完整的自动化测试 模块化封装
7 | © 2019 RingCentral, Inc. All rights reserved. 为基于
Redux 的 中大型 React 应 用提供更好的模 块化设计模型。 动机和目标
8 | © 2019 RingCentral, Inc. All rights reserved. Redux
缺点
9 | © 2019 RingCentral, Inc. All rights reserved. Redux
缺点 松散, 难以模块化 模块化 繁琐的更新操作 不可变数据* 样板代码 不够简洁
10 | © 2019 RingCentral, Inc. All rights reserved. 解决方案
usm-redux
11 | © 2019 RingCentral, Inc. All rights reserved. Reducer
@state 装饰器
12 | © 2019 RingCentral, Inc. All rights reserved. Action
Type @action 装饰器
13 | © 2019 RingCentral, Inc. All rights reserved. Dispatch
调用Action函数
14 | © 2019 RingCentral, Inc. All rights reserved. 模块依赖
模块注入 可定制的 IoC
15 | © 2019 RingCentral, Inc. All rights reserved. 不可变数据更新
usm-redux 基于 immer 突变更新不可变数据的类库
16 | © 2019 RingCentral, Inc. All rights reserved. 好处
C 便利 更简单地更新不 可变数据 O OOP 简洁的模块化 与面向对象 O 可选 可选的生命周期 与可定制的IoC L 继承 拥抱Redux生态与 保持Redux原则
17 | © 2019 RingCentral, Inc. All rights reserved. https://github.com/unadlib/usm#quick-start-for-react
18 | © 2019 RingCentral, Inc. All rights reserved. Universal
State Module 更多信息 https://github.com/unadlib/usm
19 | © 2019 RingCentral, Inc. All rights reserved. THANKS.