Why use Global Store (like Redux) to manage UI state?

ui-in-global-store.md

ui-in-global-store

Why use Global Store (like Redux) to manage UI state?

• Performance

  • Enables writing stateless function components which are:
    • simple or can be further broken down into bite-sized function components
    • debuggable (no need to worry about handling data)
    • more performant & scalable (in contrast, creating objects of class component has a memory cost)
    • greater control for optimising later on (via selectors and memoization)
    • Unit testing behavior UI is decoupled and becomes a lot easier to test
  • Easier performance tuning for complex components (instead of manually handling shouldComponentUpdate, just write memoized selectors and Viola!)

• Separation of Concerns, DRY and Testability

  • Prevent colocating the data-processing logic and the UI rendering logic
  • Keeping the UI data processing code (such as processing large lists before displaying them) separate in selectors instead of writing that logic inside React components (or helper files)
  • Makes data processing code more debuggable (following single source of truth, which is a common principle between React and Redux)
  • Enable writing tests for application a lot easier and doable

• Efficient Handling of User triggered Events in Background

  • Suppose user is filling a form and mistakenly refreshes the page (if your form data is saved in the store, you can use a persistence layer to retain the data in form even after page was reloaded)
  • Similarly keeping the Modals opened after page refreshes (reopen it based on UI state saved in store and load the respective data in it)
  • Firing analytics such as GA (instead of doing it from the UI, you'll be doing it in actions)

• Ability to Track Changes to the State

  • Client-side logging of all Errors, Network Requests, Crashes, Analytics etc of the app can be done with ease and sent to logging server for advanced debugging / analytics
  • Increases control in Server-side rendering with properly pre-defined UI data

References

1. Embrace the single state tree - Dan Abramov (Redux Author)
2. Redux vs. Plain React
3. Redux with Mark Erikson
4. Redux Architecture - Separation of Concerns
5. Why use Redux?
6. Five (5) Tips for Working with Redux in Large Applications
7. React State vs. Redux State
8. React's Functional Components vs. Class Components

Very useful content!