🔗 Connecting Redux to React

Why React-Redux?

Core Redux is deliberately UI-agnostic. A store exposes three methods: getState() to read, dispatch(action) to update, and subscribe(listener) to be told when something changed. You could wire those into React by hand — subscribe in every component, call getState, and force a re-render — but you'd re-invent a lot of fiddly, bug-prone plumbing.

React-Redux is the official binding library maintained by the Redux team. It does that plumbing for you, correctly and efficiently: it hands the store down the component tree, subscribes each component only to the slice of state it actually uses, and batches updates so React re-renders as little as possible.

Everything in this lesson comes down to two moves: (1) make the store available once at the top, and (2) read and write it from any component below.

npm install react-redux
// You also need the core store libraries:
npm install @reduxjs/toolkit   // the modern, recommended way to build the store
// or the classic package if a codebase still uses it:
npm install redux

Step 1: The Provider

Before any component can read the store, the store has to be reachable. React-Redux uses React Context under the hood, and <Provider> is the component that puts your store into that context. Wrap it around the very top of your app — once — and every component inside gains access.

In a modern React 18+ app you mount with createRoot:

// main.jsx — the single entry point of the app
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
import App from './App';

// Build the store once, at module scope — NOT inside a component.
const store = configureStore({ reducer: rootReducer });

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

If a project still uses classic Redux, the only line that changes is how the store is built:

import { createStore } from 'redux';   // legacy — still works, but Toolkit is preferred
const store = createStore(rootReducer);
// ...everything else (the Provider wrapping) is identical.

Step 2: Reading & Dispatching with Hooks

With the store in context, components talk to it through two hooks. This is the primary, recommended API for all new code — it's less boilerplate than connect() and reads top-to-bottom like ordinary React.

useSelector — read state

useSelector takes a selector function: it receives the whole state and returns just the piece this component cares about. React-Redux subscribes the component to the store and re-renders it whenever that returned value changes.

import { useSelector } from 'react-redux';

function CountDisplay() {
  // Read one slice. This component re-renders only when
  // state.counter.value changes — not on every store update.
  const count = useSelector((state) => state.counter.value);

  return <h2>Count: {count}</h2>;
}

useDispatch — send actions

useDispatch returns the store's dispatch function. Call it with an action object (or an action creator that returns one) to trigger a state change.

import { useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function CounterControls() {
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(decrement())}>−</button>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

Both together: a self-contained counter

A single component can read and write. This is the whole React-Redux loop in one place:

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value); // read
  const dispatch = useDispatch();                            // get dispatch

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => dispatch(decrement())}>−</button>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

The Older connect() Pattern

Before hooks arrived (React-Redux v7.1, 2019), the only way to bind a component was the connect() higher-order component. You'll still meet it constantly in existing projects, so you need to read it fluently — even though you'll write hooks.

connect() takes two arguments and returns a function that wraps your component, injecting store data and dispatchers as props:

import { connect } from 'react-redux';
import { increment, decrement } from './actions';

// A plain "presentational" component — it just receives props,
// and has no idea Redux exists.
function Counter({ count, increment, decrement }) {
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={decrement}>−</button>
      <button onClick={increment}>+</button>
    </div>
  );
}

// mapStateToProps: pick data out of the store → becomes props.
const mapStateToProps = (state) => ({
  count: state.counter.value,
});

// mapDispatchToProps: as an object, each key is wrapped in dispatch
// for you, so `increment` prop === () => dispatch(increment()).
const mapDispatchToProps = { increment, decrement };

// connect(...) returns an HOC; call it with the component to wrap.
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

How it maps to hooks

mapDispatchToProps can also be written as a function when you need to shape the dispatch calls yourself:

const mapDispatchToProps = (dispatch) => ({
  increment:   () => dispatch(increment()),
  decrement:   () => dispatch(decrement()),
  incrementBy: (amount) => dispatch({ type: 'counter/incrementBy', payload: amount }),
});

Selectors, Memoization & Equality

React-Redux re-renders a component when the value its selector returns changes. "Changes" is decided by a comparison — and by default that comparison is strict reference equality (===). Understanding this is the key to fast Redux apps.

The new-object trap

// ❌ Returns a BRAND-NEW object literal every render.
// Even if user and posts are unchanged, the object is a new
// reference each time, so === is false → re-render every store update.
const { user, posts } = useSelector((state) => ({
  user: state.user,
  posts: state.posts,
}));

Fix 1: select the smallest pieces separately

// ✅ Each returns a primitive or stable reference.
// The component re-renders only when that specific slice changes.
const user  = useSelector((state) => state.user);
const posts = useSelector((state) => state.posts);

Fix 2: tell useSelector to compare shallowly

import { shallowEqual } from 'react-redux';

// ✅ Pass a second arg: compare the returned object field-by-field
// instead of by reference. No re-render unless a field actually changed.
const data = useSelector(
  (state) => ({ user: state.user, posts: state.posts }),
  shallowEqual
);

Fix 3: memoize derived data with Reselect

When a selector computes something (filters, sorts, totals), recomputing on every render is wasteful and produces a new reference each time. createSelector from Reselect (bundled into Redux Toolkit) caches the result and only recomputes when its inputs change:

import { createSelector } from '@reduxjs/toolkit'; // re-exports reselect

const selectTodos  = (state) => state.todos;
const selectFilter = (state) => state.filter;

// Recomputes ONLY when todos or filter changes; otherwise returns
// the exact same array reference → no needless re-renders.
const selectVisibleTodos = createSelector(
  [selectTodos, selectFilter],
  (todos, filter) => {
    switch (filter) {
      case 'completed': return todos.filter((t) => t.completed);
      case 'active':    return todos.filter((t) => !t.completed);
      default:          return todos;
    }
  }
);

function TodoList() {
  const visible = useSelector(selectVisibleTodos); // memoized
  return <ul>{visible.map((t) => <li key={t.id}>{t.text}</li>)}</ul>;
}

Selecting a raw slice?      → plain useSelector is fine
Selecting several values?   → separate calls OR shallowEqual
Computing/deriving a value? → memoize with createSelector

Container / Presentational Pattern

A durable way to organize connected components is to split them in two: a container that talks to Redux, and a presentational component that only knows about its props. The presentational piece stays pure, reusable, and easy to test in isolation.

// Presentational — no Redux, just props. Reusable anywhere.
function TodoList({ todos, onToggle }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id} onClick={() => onToggle(todo.id)}>
          {todo.completed ? '✓ ' : '○ '}{todo.text}
        </li>
      ))}
    </ul>
  );
}

// Container — the only part that knows about the store.
function TodoListContainer() {
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();
  return <TodoList todos={todos} onToggle={(id) => dispatch(toggleTodo(id))} />;
}

Modern codebases often collapse the two — a component can perfectly well call the hooks itself — but the separation is invaluable when the presentational piece is shared, or when you want to test rendering without a store.

function useTodos() {
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();
  const toggle = (id) => dispatch(toggleTodo(id));
  return { todos, toggle };
}

function TodoList() {
  const { todos, toggle } = useTodos(); // clean, testable, reusable
  // ...render
}

Practice & Quiz

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function Counter() {
  // TODO: read state.counter.value
  const count = /* ... */;
  // TODO: get dispatch
  const dispatch = /* ... */;

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={/* dispatch decrement */}>−</button>
      <button onClick={/* dispatch increment */}>+</button>
    </div>
  );
}

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => dispatch(decrement())}>−</button>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

function UserBadge({ name, notify }) {
  return <button onClick={notify}>Hello, {name}</button>;
}
const mapStateToProps = (state) => ({ name: state.user.name });
const mapDispatchToProps = { notify: sendPing };
export default connect(mapStateToProps, mapDispatchToProps)(UserBadge);

import { useSelector, useDispatch } from 'react-redux';
import { sendPing } from './actions';

function UserBadge() {
  const name = useSelector((state) => state.user.name);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch(sendPing())}>Hello, {name}</button>;
}
export default UserBadge;

Best Practices & Pitfalls

✅ Do

• Reach for useSelector / useDispatch first in all new code
• Create the store once at module scope and pass it to a single <Provider> at the root
• Select the smallest slice a component needs — narrow selectors mean fewer re-renders
• Memoize derived/computed data with createSelector
• Reach for shallowEqual when a selector genuinely must return an object of several fields

❌ Don't

• Don't build the store inside a component's render — it resets state every render
• Don't return a fresh object/array literal from useSelector without shallowEqual or memoization
• Don't nest multiple <Provider>s for the same store
• Don't reach for connect() in new code just out of habit — hooks are the recommended path
• Don't put non-serializable values (functions, class instances) into the store

Summary

📚 Additional Resources

• React-Redux — official documentation
• React-Redux — Quick Start
• React-Redux — connect() API reference
• React-Redux — Hooks API reference

🚀 What's Next?

You've met the two hooks in passing — next we go deep. The following lesson, useSelector and useDispatch hooks, unpacks selector patterns, factory selectors, async dispatch with thunks, and the subtle equality rules that keep a Redux app fast.