Redux

## Redux

- [ ] Warning: [React-query is likely simpler](https://twitter.com/vespasianvs1/status/1406885608220418049?s=27)
- [ ] [Switching from Redux to Context with Hooks](https://staleclosures.dev/from-redux-to-hooks-case-study/)
- [ ] See Selectors in the post above for an example of using Hooks for selectors
- [ ] [Solid image-based intro](https://javascriptweekly.com/link/49592/225d961f7b)
- [ ] 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](https://blog.theodo.com/2019/07/how-i-ruined-my-application-performances-by-using-react-context-instead-of-redux/). 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](https://logrocket.com))
- [ ] Comparisons with Context:
- [ ] [Comparison by Mark](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior)
- [ ] [Comparison by Dave Ceddia](https://daveceddia.com/context-api-vs-redux/)
- [ ] Why Not?
- [ ] [useContext and Hooks can partially replace](https://staleclosures.dev/from-redux-to-hooks-case-study/)
- [ ] [Child composition avoids prop drilling pain](https://twitter.com/dan_abramov/status/1021850499618955272)
- [ ] [Alternatives](https://hackernoon.com/the-react-state-museum-a278c726315). Also, [constate](https://medium.freecodecamp.org/reacts-new-context-api-how-to-toggle-between-local-and-global-state-c6ace81443d0)
- [ ] [Unstated example](https://codesandbox.io/s/github/kinsomicrote/unstated-counter/tree/master/?from-embed)
- [ ] Actions
- [ ] 3 Types:
- [ ] [Event](https://www.dropbox.com/s/1rdbxpku13jv5et/Screenshot%202018-05-03%2015.56.38.png?dl=0) (notify that something happened)
- [ ] [Commands](https://www.dropbox.com/s/r4678xahbm5fjbg/Screenshot%202018-05-03%2015.55.59.png?dl=0) (Do something. Like calling a func, but don't return anything.)
- [ ] [Document](https://www.dropbox.com/s/va35vnjkb4a5f72/Screenshot%202018-05-03%2015.55.24.png?dl=0) (Store data in Redux store, such as log).
- [ ] Above links from [this solid talk on Advanced Redux](https://www.slideshare.net/nirkaufman/advanced-redux-patterns)
- [ ] Action creators
- [ ] Action constants
- [ ] [Consider namespacing](https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/redux/modules/auth.js#L1)
- [ ] Store
- [ ] Reducers
- [ ] [You can use combineReducers in your own reducer too](https://github.com/FortechRomania/react-redux-complete-example/blob/master/src/app/state/ducks/product/reducers.js)
- [ ] [Immutable data structure approaches](https://daveceddia.com/react-redux-immutability-guide/) and in [Redux docs](
https://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html)
- [ ] immutableStateInvariant
- [ ] Connect via HOC
- [ ] mapStateToProps
- [ ] mapDispatchToProps
- [ ] [Handy mapDispatchToProps object form](https://daveceddia.com/redux-mapdispatchtoprops-object-form/). Dan Abramov [shows this pattern on EggHead](https://egghead.io/lessons/javascript-redux-using-mapdispatchtoprops-shorthand-notation).
- [ ] Connect via Hooks
- [ ] mapStateToProps -> [useSelector](https://react-redux.js.org/api/hooks#useselector)
- [ ] mapDispatchToProps -> [useDispatch](https://react-redux.js.org/api/hooks#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](https://itnext.io/the-perils-of-using-a-common-redux-anti-pattern-344d778e59da). 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](https://github.com/pitzcarraldo/reduxible/issues/8#issue-124545582).

## 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](https://github.com/coryhouse/pluralsight-redux-app-used-to-build-script/blob/master/src/reducers/ajaxStatusReducer.js)

## Performance

- [ ] Use [selectors](https://github.com/reactjs/reselect) for Redux
- [ ] Normalize your Redux store
- [ ] Structure your Redux store by key for fast access