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
Team operations that are not burdened by SRE
kazatohiei
1
310
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
9.9k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
580
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
310
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Pragmatic Product Professional
lauravandoore
35
6.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Side Projects
sachag
455
42k
Navigating Team Friction
lara
187
15k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
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.