基于Redux的模块化设计

Chinese version
For JSConf China 2019
By 林长青

Transcript

1. 基于Redux的模块化 设计 Michael Lin 林长青
2. 2 | © 2019 RingCentral, Inc. All rights reserved. 动机 01 解决方案 03 Redux 缺点 02 Demo 04
3. 3 | © 2019 RingCentral, Inc. All rights reserved. 如何构建基于Redux 大型应用?
4. 4 | © 2019 RingCentral, Inc. All rights reserved. 构建大型应用 模块化 UI 组件 ?
5. 5 | © 2019 RingCentral, Inc. All rights reserved. • Redux 样板代码 Combine Reducers Middleware Connector Action Type
6. 6 | © 2019 RingCentral, Inc. All rights reserved. 模块化 难点 核心业务逻辑与UI分离 模块化状态管理 优点 协作 分治 持续交付和产品迭代 更完整的自动化测试 模块化封装
7. 7 | © 2019 RingCentral, Inc. All rights reserved. 为基于 Redux 的 中大型 React 应 用提供更好的模 块化设计模型。 动机和目标
8. 8 | © 2019 RingCentral, Inc. All rights reserved. Redux 缺点
9. 9 | © 2019 RingCentral, Inc. All rights reserved. Redux 缺点 松散, 难以模块化 模块化 繁琐的更新操作 不可变数据* 样板代码 不够简洁
10. 10 | © 2019 RingCentral, Inc. All rights reserved. 解决方案 usm-redux
11. 11 | © 2019 RingCentral, Inc. All rights reserved. Reducer @state 装饰器
12. 12 | © 2019 RingCentral, Inc. All rights reserved. Action Type @action 装饰器
13. 13 | © 2019 RingCentral, Inc. All rights reserved. Dispatch 调用Action函数
14. 14 | © 2019 RingCentral, Inc. All rights reserved. 模块依赖 模块注入 可定制的 IoC
15. 15 | © 2019 RingCentral, Inc. All rights reserved. 不可变数据更新 usm-redux 基于 immer 突变更新不可变数据的类库
16. 16 | © 2019 RingCentral, Inc. All rights reserved. 好处 C 便利 更简单地更新不 可变数据 O OOP 简洁的模块化 与面向对象 O 可选 可选的生命周期 与可定制的IoC L 继承 拥抱Redux生态与 保持Redux原则
17. 17 | © 2019 RingCentral, Inc. All rights reserved. https://github.com/unadlib/usm#quick-start-for-react
18. 18 | © 2019 RingCentral, Inc. All rights reserved. Universal State Module 更多信息 https://github.com/unadlib/usm
19. 19 | © 2019 RingCentral, Inc. All rights reserved. THANKS.