Redux Based Modular Design

For JSConf China 2019
By 林长青

Transcript

1. Redux Based Modular Design Michael Lin
2. 2 | © 2019 RingCentral, Inc. All rights reserved. Motivation 01 Solution 03 Redux Cons 02 Demo 04
3. 3 | © 2019 RingCentral, Inc. All rights reserved. How to build a large app with Redux ?
4. 4 | © 2019 RingCentral, Inc. All rights reserved. Build Large Apps Modularity UI Component ?
5. 5 | © 2019 RingCentral, Inc. All rights reserved. • Redux Boilerplate Combine Reducers Middleware Connector Action Type
6. 6 | © 2019 RingCentral, Inc. All rights reserved. Modularity Difficulty Core Business Logic Separation from UI Modularity-based State Management Pros Collaborative Development Divide and Conquer Continuous Delivery and Product Iteration Full Test Automation Modular Encapsulation
7. 7 | © 2019 RingCentral, Inc. All rights reserved. Redux based modular design for medium to large React applications will provide a better modular model. Motivation & Goal
8. 8 | © 2019 RingCentral, Inc. All rights reserved. Redux Cons
9. 9 | © 2019 RingCentral, Inc. All rights reserved. Redux Cons Verbose Update Operations Loose, Difficult to Modularize Boilerplate Code Not Concise Enough Immutable Data* Modularity
10. 10 | © 2019 RingCentral, Inc. All rights reserved. Solution usm-redux
11. 11 | © 2019 RingCentral, Inc. All rights reserved. Reducer @state decorate state
12. 12 | © 2019 RingCentral, Inc. All rights reserved. Action Type @action decorate mutation
13. 13 | © 2019 RingCentral, Inc. All rights reserved. Dispatch Call Action Function
14. 14 | © 2019 RingCentral, Inc. All rights reserved. Module Dependency Module Injection Customizable IoC
15. 15 | © 2019 RingCentral, Inc. All rights reserved. Immutable Data Update usm-redux based on immer Create the next immutable state by mutating the current one.
16. 16 | © 2019 RingCentral, Inc. All rights reserved. Benefits C O O L Convenient More Convenient to Update Immutable OOP Easier to modularize OOP Optional Optional Life cycle Customizable IoC Link Embrace Ecology Keep Principles
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 More Information https://github.com/unadlib/usm
19. 19 | © 2019 RingCentral, Inc. All rights reserved. THANKS.