Derived values with useSelector in React Redux

Totals, counts and filtered lists do not need their own place in the store. A selector can compute them from the state that is already there.

All React Redux examples React Redux: usage and stats

Derived values with useSelector in React Redux: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Derive, don't store. The store only keeps the items and a tax rate. Summary computes the item count and subtotal inside its selectors with reduce. [1]
Several useSelector calls. Summary calls useSelector three times, once per value it needs. Each call returns a plain number. [1]
Small, focused selectors. Each selector reads only what it uses, like state.taxRate, instead of returning the whole state object. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { createStore } from "redux";
import { Provider, useSelector, useDispatch } from "react-redux";

const initialState = {
  taxRate: 0.2,
  items: [
    { id: 1, name: "Keyboard", price: 49, qty: 1 },
    { id: 2, name: "Mouse", price: 19, qty: 2 },
    { id: 3, name: "Monitor", price: 189, qty: 0 },
  ],
};

function reducer(state = initialState, action) {
  if (action.type === "cart/changeQty") {
    const items = state.items.map((i) =>
      i.id === action.id ? { ...i, qty: Math.max(0, i.qty + action.delta) } : i);
    return { ...state, items };
  }
  return state;
}

const store = createStore(reducer);

const page = { minHeight: "100vh", background: "#111", display: "flex", alignItems: "center",
  justifyContent: "center", fontFamily: "system-ui, sans-serif" };
const card = { background: "#1e1e1e", color: "#e5e7eb", border: "1px solid #333", borderRadius: 12,
  padding: "18px 22px", boxSizing: "border-box" };
const btn = { padding: "6px 12px", borderRadius: 8, border: "1px solid #444", background: "#2a2a2a",
  color: "#f3f4f6", fontSize: 14, cursor: "pointer" };

function Items() {
  const items = useSelector((state) => state.items);
  const dispatch = useDispatch();
  const change = (id, delta) => dispatch({ type: "cart/changeQty", id, delta });
  return items.map((i) => (
    <div key={i.id} style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
      <span style={{ flex: 1 }}>{i.name} <small style={{ color: "#9ca3af" }}>${i.price}</small></span>
      <button style={btn} onClick={() => change(i.id, -1)}>-</button>
      <b style={{ width: 22, textAlign: "center" }}>{i.qty}</b>
      <button style={btn} onClick={() => change(i.id, 1)}>+</button>
    </div>
  ));
}

function Summary() {
  // Values derived from the items, not stored in state
  const count = useSelector((state) => state.items.reduce((n, i) => n + i.qty, 0));
  const subtotal = useSelector((state) => state.items.reduce((s, i) => s + i.price * i.qty, 0));
  const taxRate = useSelector((state) => state.taxRate);
  return (
    <div style={{ borderTop: "1px solid #333", paddingTop: 10, marginTop: 4, fontSize: 14 }}>
      <div>{count} items &middot; subtotal ${subtotal.toFixed(2)}</div>
      <div style={{ fontSize: 18, fontWeight: 700, color: "#86efac" }}>
        Total with tax: ${(subtotal * (1 + taxRate)).toFixed(2)}
      </div>
    </div>
  );
}

export default function App() {
  return (
    <Provider store={store}>
      <div style={page}>
        <div style={{ ...card, width: 360 }}>
          <Items />
          <Summary />
        </div>
      </div>
    </Provider>
  );
}

Ctrl/⌘ + Enter runs

Use the + and - buttons; the count, subtotal and total are recomputed from the items. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with react-redux 9.3.0, react 19.3.0, react-dom 19.3.0, redux 5.0.1. Needs WebGL.

More React Redux examples

Provider in React Redux useSelector and useDispatch counter in React Redux Selecting by prop with useSelector in React Redux shallowEqual with useSelector in React Redux

Sources

Docs: api › hooks

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with React Redux? Ask AgentGid →