React & Modern Frontend (445 Qs)•Part 10: Modern React 18, React 19 & Next.js Patterns (317 - 353)
What should be stored in Redux vs derived with selectors?
A common mistake is storing computed/derived values in Redux state itself, which then has to be kept in sync manually every time the source data changes. The rule of thumb: store the minimal raw data, and compute everything else with selectors.
| Store in Redux (source of truth) | Derive with selectors (computed) |
|---|---|
Raw entities fetched from the server (items, users) | Filtered/sorted/paginated views of that list |
Simple flags representing real state (isLoggedIn, selectedId) | Aggregates like totals, counts, averages |
| IDs of selected/active items | The full object looked up by that ID |
| Form field values | Validation results / "is form valid" flags |
javascript
// BAD: `total` is derived data stored redundantly in state
// Now every reducer that touches `items` must also recompute `total`
{ items: [...], total: 42 }
// GOOD: store only `items`; compute `total` with a memoized selector
const selectItems = (state) => state.cart.items;
const selectTotal = createSelector([selectItems], (items) =>
items.reduce((sum, i) => sum + i.price * i.qty, 0)
);
Storing only raw data and deriving the rest avoids state getting out of sync, removes the need for extra reducer logic to keep computed fields updated, and keeps re-renders scoped to components that actually depend on the derived value (thanks to selector memoization).