Redux

[coryhouse]

Redux

• Warning: React-query is likely simpler
• Switching from Redux to Context with Hooks
  • See Selectors in the post above for an example of using Hooks for selectors
• Solid image-based intro
• Why Redux?
  • Advantages over context:
  • Connected components are automatically pure
  • Performance. Selectors mean each component only re-renders when it's props or state changes. With context, all child components re-render. Switching to context can hurt performance. But keep in mind that Redux selectors (e.g. mapStateToProps) run for every component after any Redux state change, so those need to be fast. Also useSelector is a hook, so it can't stop renders caused by parent components. An app that only has useSelector everywhere should probably add React.memo() to some components to help avoid renders from cascading all the time.
  • Ecosystem (reselect, Redux form)
  • Redux devtools (time travel)
  • Middleware (log actions, intercept all actions or certain actions, replay user issues using logrocket)
  • Comparisons with Context:
    • Comparison by Mark
    • Comparison by Dave Ceddia
• Why Not?
  • useContext and Hooks can partially replace
  • Child composition avoids prop drilling pain
  • Alternatives. Also, constate
  • Unstated example
• Actions
  • 3 Types:
    • Event (notify that something happened)
    • Commands (Do something. Like calling a func, but don't return anything.)
    • Document (Store data in Redux store, such as log).
    • Above links from this solid talk on Advanced Redux
• Action creators
• Action constants
  • Consider namespacing
• Store
• Reducers
  • You can use combineReducers in your own reducer too
• Immutable data structure approaches and in Redux docs
  • immutableStateInvariant
• Connect via HOC
  • mapStateToProps
  • mapDispatchToProps
    • Handy mapDispatchToProps object form. Dan Abramov shows this pattern on EggHead.
• Connect via Hooks
  • mapStateToProps -> useSelector
  • mapDispatchToProps -> useDispatch - Note, useCallback if you want to pass dispatch down to child components and are worried about re-renders. dispatch gets a new instance on each render so child components will needlessly re-render when the parent re-renders otherwise. This is a downside over connect.
  • How useSelector differs from mapStateToProps in connect
    • Can return any data structure from useSelector, not just an obj like in mapStateToProps.
    • Can call useSelector multiple times. Multiple calls are batched into a single render.
    • No ownProps, but instead can be accessed since useSelector is declared inside component.
    • Does a strict equality check instead of shallow comparison. So watch out, returning a new object from useSelector will always result in a re-render. To avoid the needless re-render you can:
      • Call useSelector multiple times so that each one doesn't instantiate a new obj inside.
      • Use reselect to memoize
      • Override the default equality check using shallowEqual from react-redux
    • Connect avoids child components re-rendering when their parent changes if their props don't change. useSelector doesn't do this. So useMemo on the child if you have a perf concern.
• Testing
• Ducks
• Selectors / Reselect

Redux Best Practices

• Keep actions lean. They should merely describe an action. It's the reducer's job to actually handle state changes.
• Keep each reducer's state shallow. For example for an e-commerce application, instead of having a cart reducer with cartItems in addition to coupon codes, have a cartItems reducer to manage that slice of your application state and a couponCodes reducer to manage that part of your state.
• Think of your Redux store like a normalized DB. Avoid creating an action and reducer for each container. This leads to needless boilerplate and reduces Redux's power. Instead, container, actions and reducers should be decoupled. One action can be handled by multiple reducers. Multiple reducers can handle a single action. More here from Dan.

Redux Thunks

Redux Saga

• Slides
• Generators
• Effects
• Helpers

Maintainability

• Declare state in a centralized place so users can understand the Redux store's structure.
• Avoid redundancy in reducers by checking for common suffixes on action types

Performance

• Use selectors for Redux
• Normalize your Redux store
• Structure your Redux store by key for fast access