useSelector and useDispatch
In this page:
const value = useSelector(state => state.sliceName.value);
const dispatch = useDispatch();
dispatch({ type: "actionType", payload: data });Reading State with useSelector
useSelector takes a function that receives the whole Redux state and returns just the piece a component needs. React-redux subscribes the component to that specific slice, so it only re-renders when the selected value actually changes, not on every unrelated store update.
Example: Reading State with useSelector
// Run in your local React project (npm install required)
import { useSelector } from 'react-redux';
function ItemCount() {
const count = useSelector(state => state.cart.items.length);
return <p>Items: {count}</p>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Dispatching Actions with useDispatch
useDispatch() returns the store's dispatch function directly, letting a component trigger state changes by calling dispatch(action) inside event handlers, exactly like calling store.dispatch() manually, but wired to the store via Context under the hood.
Example: Dispatching Actions with useDispatch
// Run in your local React project (npm install required)
import { useDispatch } from 'react-redux';
function AddButton() {
const dispatch = useDispatch();
return <button onClick={() => dispatch({ type: 'cart/addItem', payload: { id: 3 } })}>Add</button>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Combining Both in One Component
Most components that interact with Redux use both hooks together: useSelector to display current state, and useDispatch to trigger updates in response to user actions, forming a complete read-and-write connection to the store.
Example: Combining Both in One Component
// Run in your local React project (npm install required)
import { useSelector, useDispatch } from 'react-redux';
function Cart() {
const items = useSelector(state => state.cart.items);
const dispatch = useDispatch();
return (
<div>
<p>{items.length} items</p>
<button onClick={() => dispatch({ type: 'cart/clear' })}>Clear Cart</button>
</div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Selecting the entire state object with useSelector(state => state) instead of just the slice needed, causing re-renders on every single change.
- Calling useDispatch() and forgetting to actually invoke the returned function.
- Creating a new object/array inline inside useSelector, causing unnecessary re-renders since a fresh reference never looks equal to the last one.
- useSelector(fn) subscribes a component to a specific slice of the Redux store, re-rendering when that slice changes.
- useDispatch() returns the store's dispatch function for triggering actions.
- Selecting only the specific data a component needs (not the whole state) minimizes unnecessary re-renders.
- Both hooks come from react-redux and require the component to be inside a <Provider>.
Requires npm install react-redux (hooks API added in react-redux 7.1+) — not available via CDN in this sandbox.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: