How to Use Redux in React: Simple Guide with Example

To use Redux in React, create a Redux store with reducers, wrap your app in a Provider from react-redux, and use useSelector to read state and useDispatch to send actions. This connects your React components to the Redux state for predictable state management.

Syntax

Here is the basic syntax to set up Redux in a React app:

• createStore(reducer): Creates the Redux store holding the app state.
• <Provider store={store}>: Wraps your React app to give access to the Redux store.
• useSelector(selector): Reads data from the Redux store.
• useDispatch(): Returns the dispatch function to send actions.

javascript

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

// Reducer function
function reducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

// Create store
const store = createStore(reducer);

// React component example
function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <>
      <div>Count: {count}</div>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
    </>
  );
}

// Wrap app
function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

Example

This example shows a simple counter app using Redux in React. The count state is stored in Redux, and the button dispatches an action to increase the count.

javascript

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

// Reducer to handle count state
function reducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// Create Redux store
const store = createStore(reducer);

// Counter component
function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <main style={{ fontFamily: 'Arial, sans-serif', padding: '1rem' }}>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })} aria-label="Increment count">+</button>
      <button onClick={() => dispatch({ type: 'decrement' })} aria-label="Decrement count">-</button>
    </main>
  );
}

// App component with Provider
export default function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

Output

Counter: 0
[+] [-]
Clicking + increases count, clicking - decreases count.

Common Pitfalls

Common mistakes when using Redux in React include:

• Not wrapping the app in <Provider>, so components can't access the store.
• Mutating state directly in reducers instead of returning new state objects.
• Forgetting to use useDispatch to send actions or using incorrect action types.
• Not selecting the correct slice of state with useSelector.

Always keep reducers pure and immutable, and ensure your components are inside the Provider.

javascript

/* Wrong reducer mutating state directly */
function badReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'increment':
      state.count += 1; // Wrong: mutates state
      return { ...state };
    default:
      return state;
  }
}

/* Correct reducer returning new state */
function goodReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

Quick Reference

Redux in React quick tips:

• Use createStore to make the store.
• Wrap your app with <Provider store={store}>.
• Use useSelector to read state.
• Use useDispatch to send actions.
• Keep reducers pure and return new state objects.
• Use action types as strings to describe changes.

Key Takeaways

Wrap your React app in Provider to connect Redux store.

Use useSelector to read state and useDispatch to send actions.

Reducers must be pure functions returning new state, never mutating existing state.

Define clear action types and handle them in reducers for predictable state changes.

Always keep Redux logic separate from UI components for clean code.