You’ve mastered the fundamentals of Redux and seen how Redux Toolkit simplifies store setup, action creation, and reducer logic. Now, let’s bridge the gap between your Redux store and your React components. The react-redux library provides the essential tools to connect your UI to the centralized Redux state, allowing components to read data from the store and dispatch actions to update it.
This article will focus on the core components and hooks provided by react-redux that enable this integration: the Provider component, and the useSelector and useDispatch hooks. These are the modern, recommended ways to interact with Redux in React functional components, ensuring efficient updates and a clean data flow.
The `Provider` Component: Making the Store Available
The Provider component is the glue that connects your Redux store to your React application. You typically wrap your entire React application (or the top-level component that needs access to the store) with the Provider component, passing your Redux store as a prop.
Once your application is wrapped in the Provider, any component nested within it (no matter how deeply) can access the Redux store without the need for prop drilling, thanks to React’s Context API (which react-redux leverages internally).
<!-- src/index.tsx or src/main.tsx (Your application entry point) -->
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import App from './App';
import store from './app/store'; // Your Redux store configured with configureStore
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
By placing the Provider at the root of your application, you ensure that the Redux store is accessible to all components that need it, establishing the single source of truth across your entire UI.
`useSelector`: Selecting State from the Store
The useSelector hook is your primary tool for extracting data from the Redux store in your functional React components. It takes a “selector” function as an argument, which receives the entire Redux state as its input and returns the specific piece of data your component needs.
When the relevant part of the Redux state changes, useSelector will automatically re-render your component with the updated data. It performs a strict equality comparison (`===`) on the *result* of your selector function to determine if the component needs to re-render.
<!-- src/features/counter/CounterDisplay.tsx -->
import React from 'react';
import { useSelector } from 'react-redux';
import { RootState } from '../../app/store'; // Import your RootState type
const CounterDisplay: React.FC = () => {
// 1. Basic selection: Directly select the counter value
const count = useSelector((state: RootState) => state.counter.value);
// 2. Selecting multiple values (returns an object, re-renders if *any* value changes)
// const { value, status } = useSelector((state: RootState) => ({
// value: state.counter.value,
// status: state.counter.status,
// }));
// 3. Using a memoized selector (recommended for complex derived state)
// import { createSelector } from '@reduxjs/toolkit';
// const selectIsEven = createSelector(
// (state: RootState) => state.counter.value,
// (value) => value % 2 === 0
// );
// const isEven = useSelector(selectIsEven);
return (
<div>
<h3>Current Count: {count}</h3>
{/* <p>Is Even: {isEven ? 'Yes' : 'No'}</p> */}
</div>
);
};
export default CounterDisplay;
Important considerations for `useSelector`:
- Return minimal data: Only return the data your component *actually* uses to prevent unnecessary re-renders.
- Memoization: If your selector performs complex calculations or returns a new object/array every time (even if the underlying data hasn’t changed), use memoized selectors (e.g., from Redux Toolkit’s `createSelector` or `reselect`) to optimize performance and prevent spurious re-renders.
- Type Safety: Always type your `state` argument in the selector function with `RootState` (derived from your `configureStore` setup) for full TypeScript benefits.
`useDispatch`: Dispatching Actions
The useDispatch hook provides a direct reference to the `dispatch` function from your Redux store. It doesn’t take any arguments and simply returns the `dispatch` function, which you can then call within your functional components to send actions to the store.
Unlike useSelector, useDispatch rarely causes re-renders itself (unless the `dispatch` function itself changes, which is highly unusual).
<!-- src/features/counter/CounterControls.tsx -->
import React from 'react';
import { useDispatch } from 'react-redux';
import { AppDispatch } from '../../app/store'; // Import your AppDispatch type
import { increment, decrement, incrementByAmount, reset } from './counterSlice'; // Actions from your Redux Toolkit slice
const CounterControls: React.FC = () => {
// Get the dispatch function
const dispatch: AppDispatch = useDispatch();
const handleIncrement = () => {
dispatch(increment()); // Dispatch the 'increment' action
};
const handleDecrement = () => {
dispatch(decrement()); // Dispatch the 'decrement' action
};
const handleIncrementByFive = () => {
dispatch(incrementByAmount(5)); // Dispatch with a payload
};
const handleReset = () => {
dispatch(reset()); // Dispatch the 'reset' action
};
return (
<div>
<button onClick={handleIncrement}>Increment</button>
<button onClick={handleDecrement}>Decrement</button>
<button onClick={handleIncrementByFive}>Increment by 5</button>
<button onClick={handleReset}>Reset</button>
</div>
);
};
export default CounterControls;
Important considerations for `useDispatch`:
- Type Safety: It’s good practice to explicitly type `dispatch` with `AppDispatch` (derived from your `configureStore` setup) to ensure TypeScript knows about all possible actions your application can dispatch, especially when dealing with async thunks.
- No direct mutations: Remember that dispatching an action is the *only* way to request a state change in Redux. Never try to directly modify the state retrieved via `useSelector`.
Bringing it all Together (Example `App.tsx`)
Here’s how these pieces might fit together in a simple React application:
<!-- src/App.tsx -->
import React from 'react';
import CounterDisplay from './features/counter/CounterDisplay'; // Component using useSelector
import CounterControls from './features/counter/CounterControls'; // Component using useDispatch
import './App.css'; // Optional CSS
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Redux Counter Example</h1>
<CounterDisplay />
<CounterControls />
</header>
</div>
);
}
export default App;
By leveraging `Provider`, `useSelector`, and `useDispatch`, `react-redux` provides a clean, efficient, and type-safe way to manage global state in your React applications. This pattern is the backbone of modern React-Redux development, making your UIs responsive to state changes and your data flow predictable.
[…] Connecting Redux to React with `react-redux` […]