Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Redux Based Modular Design

Redux Based Modular Design

For JSConf China 2019
By 林长青

Avatar for JSConf China

JSConf China

October 20, 2019
Tweet

More Decks by JSConf China

Other Decks in Programming

Transcript

  1. 3 | © 2019 RingCentral, Inc. All rights reserved. How

    to build a large app with Redux ?
  2. 4 | © 2019 RingCentral, Inc. All rights reserved. Build

    Large Apps Modularity UI Component ?
  3. 5 | © 2019 RingCentral, Inc. All rights reserved. •

    Redux Boilerplate Combine Reducers Middleware Connector Action Type
  4. 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
  5. 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
  6. 9 | © 2019 RingCentral, Inc. All rights reserved. Redux

    Cons Verbose Update Operations Loose, Difficult to Modularize Boilerplate Code Not Concise Enough Immutable Data* Modularity
  7. 14 | © 2019 RingCentral, Inc. All rights reserved. Module

    Dependency Module Injection Customizable IoC
  8. 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.
  9. 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
  10. 18 | © 2019 RingCentral, Inc. All rights reserved. Universal

    State Module More Information https://github.com/unadlib/usm