-
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!)
- Enables writing stateless function components which are:
-
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
- Embrace the single state tree - Dan Abramov (Redux Author)
- Redux vs. Plain React
- Redux with Mark Erikson
- Redux Architecture - Separation of Concerns
- Why use Redux?
- Five (5) Tips for Working with Redux in Large Applications
- React State vs. Redux State
- React's Functional Components vs. Class Components
Very useful content!