L2: Connect Redux to React

Now that we have a Redux store, we need to connect it to React so our components can access the state.

The Provider Component

React Redux provides a <Provider> component that makes the Redux store available to all components in your app.

How it works:

<Provider store={store}>     ← Makes store available
  <App>                      ← Can access store
    <HomePage>               ← Can access store
      <PropertyCard>          ← Can access store
      </PropertyCard>
    </HomePage>
  </App>
</Provider>

Any component inside <Provider> can:

Read state using useSelector()
Dispatch actions using useDispatch()

Think of Provider like Context Provider - It uses React Context under the hood to pass the store down the component tree!

What We're Building

We'll update src/App.jsx to:

Import the Provider component
Import our store
Wrap the entire app with <Provider>

Current App Structure

Currently, App.jsx looks like this:

src/App.jsx

import { Router } from './components/Router';

export function App() {
  return <Router />;
}

Simple and clean! The <Router> component handles all our routing.

Step 1: Import Provider and Store

At the top of src/App.jsx, add these imports:

src/App.jsx

import { Provider } from 'react-redux';
import { store } from './state/store';
import { Router } from './components/Router';

export function App() {
  return <Router />;
}

What are we importing?

Step 2: Wrap App with Provider

Now wrap the <Router> component with <Provider>:

src/App.jsx

import { Provider } from 'react-redux';
import { store } from './state/store';
import { Router } from './components/Router';

export function App() {
  return (
    <Provider store={store}>
      <Router />
    </Provider>
  );
}

What changed?

export function App() {
  return <Router />;
}

Just rendering <Router> directly.

export function App() {
  return (
    <Provider store={store}>
      <Router />
    </Provider>
  );
}

Now <Router> (and all its children) are wrapped with <Provider>.

The component tree now looks like:

App
 └─ Provider (provides Redux store)
     └─ Router (can access store)
         ├─ HomePage (can access store)
         │   ├─ ListingFilters (can access store)
         │   └─ ListingList (can access store)
         │       └─ PropertyCard (can access store)
         ├─ ListingDetailsPage (can access store)
         └─ NotFoundPage (can access store)

Every component can now use Redux hooks!

Complete Code

Here's the complete App.jsx file:

src/App.jsx

import { Provider } from 'react-redux';
import { store } from './state/store';
import { Router } from './components/Router';

export function App() {
  return (
    <Provider store={store}>
      <Router />
    </Provider>
  );
}

Only 4 lines of changes to connect Redux! 🎉

Verify Connection

Let's verify Redux is connected properly. Open your browser's Redux DevTools:

Install Redux DevTools Extension

If you haven't already, install the Redux DevTools browser extension:

Chrome: Redux DevTools
Firefox: Redux DevTools
Edge: Available in Edge Add-ons store

Open DevTools

Open your app in the browser
Open browser DevTools (F12 or Right-click → Inspect)
Click the Redux tab

You should see the Redux DevTools interface!

Check Initial State

In the State tab, you should see an empty object:

{
  // Empty for now - we'll add slices next!
}

This confirms:

✅ Store is created
✅ Provider is working
✅ DevTools can communicate with Redux

Understanding Provider Placement

Where should Provider go?

Common Patterns

Provider with Other Providers

Redux Provider works alongside other providers:

src/App.jsx

import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { ThemeProvider } from './contexts/ThemeContext';
import { store } from './state/store';
import { Router } from './components/Router';

export function App() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <ThemeProvider>
          <Router />
        </ThemeProvider>
      </BrowserRouter>
    </Provider>
  );
}

Order matters!

Redux Provider should be outermost (if state is used everywhere)
Or wrap only the parts that need Redux

Provider with Error Boundaries

Wrap Provider with error boundary for better error handling:

src/App.jsx

import { Provider } from 'react-redux';
import { ErrorBoundary } from './components/ErrorBoundary';
import { store } from './state/store';
import { Router } from './components/Router';

export function App() {
  return (
    <ErrorBoundary>
      <Provider store={store}>
        <Router />
      </Provider>
    </ErrorBoundary>
  );
}

Testing the Connection

To verify Redux is working, let's add a simple test component temporarily:

src/App.jsx

import { Provider, useSelector } from 'react-redux';
import { store } from './state/store';
import { Router } from './components/Router';

function ReduxTest() {
  const state = useSelector((state) => state);
  console.log('Redux state:', state);
  return null;
}

export function App() {
  return (
    <Provider store={store}>
      <ReduxTest />
      <Router />
    </Provider>
  );
}

Check the console - you should see:

Redux state: {}

Remove <ReduxTest /> after verifying! We'll use proper Redux hooks in components soon.

What's Next?

Perfect! Redux is now connected to React. In the next lesson, we'll:

Create a slice - Define our listings state structure
Add reducers - Write functions to update state
Define actions - Create actions for state changes

✅ Lesson Complete! Your entire app can now access the Redux store through Provider!

Key Takeaways

✅ <Provider> makes Redux store available to all components
✅ Place Provider at the root of your app
✅ Pass your store as a prop: <Provider store={store}>
✅ All nested components can use useSelector() and useDispatch()
✅ Redux DevTools automatically works with configureStore()
✅ Provider uses React Context under the hood

L2: Connect Redux to React

Provider from 'react-redux'

store from './state/store'

At the Root (Recommended)

In main.jsx (Alternative)

Multiple Providers (Advanced)

On this page