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 |

     // 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).