The Project | About Us | Contribute | Donations | License

HOME

In this section, we will learn how to connect Redux to a React application. By the end of this lesson, you will understand how to integrate Redux with React components to manage the state of your application effectively.

Key Concepts

Provider Component: The Provider component from react-redux makes the Redux store available to any nested components that need to access the Redux store.
connect Function: The connect function connects a React component to the Redux store.
mapStateToProps: This function allows you to map the state from the Redux store to the props of a React component.
mapDispatchToProps: This function allows you to map dispatch actions to the props of a React component.

Step-by-Step Guide

Setting Up the Redux Store

First, ensure you have a Redux store set up. If you haven't done this yet, refer to the previous sections on setting up Redux.

// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

Wrapping the App with Provider

Wrap your main application component with the Provider component and pass the Redux store to it.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Connecting a Component to the Redux Store

Let's connect a simple component to the Redux store. We'll use the connect function from react-redux.

Example Component

// components/Counter.js
import React from 'react';
import { connect } from 'react-redux';

const Counter = ({ count, increment, decrement }) => (
  <div>
    <h1>{count}</h1>
    <button onClick={increment}>Increment</button>
    <button onClick={decrement}>Decrement</button>
  </div>
);

const mapStateToProps = (state) => ({
  count: state.count,
});

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' }),
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Reducer Example

Ensure you have a reducer that handles the actions dispatched by the component.

// reducers/index.js
const initialState = {
  count: 0,
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

export default rootReducer;

Using the Connected Component

Now, you can use the connected Counter component in your application.

// App.js
import React from 'react';
import Counter from './components/Counter';

const App = () => (
  <div>
    <h1>Redux Counter</h1>
    <Counter />
  </div>
);

export default App;

Practical Exercise

Exercise: Connect a Todo List Component to Redux

Create a Redux store with an initial state containing a list of todos.
Create actions for adding and removing todos.
Create a reducer to handle these actions.
Connect a TodoList component to the Redux store to display the list of todos.
Connect a TodoForm component to the Redux store to add new todos.

Solution

Store Setup

// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

Actions

// actions/todoActions.js
export const addTodo = (todo) => ({
  type: 'ADD_TODO',
  payload: todo,
});

export const removeTodo = (id) => ({
  type: 'REMOVE_TODO',
  payload: id,
});

Reducer

// reducers/todoReducer.js
const initialState = {
  todos: [],
};

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, action.payload] };
    case 'REMOVE_TODO':
      return { ...state, todos: state.todos.filter(todo => todo.id !== action.payload) };
    default:
      return state;
  }
};

export default todoReducer;

Connecting Components

// components/TodoList.js
import React from 'react';
import { connect } from 'react-redux';
import { removeTodo } from '../actions/todoActions';

const TodoList = ({ todos, removeTodo }) => (
  <ul>
    {todos.map(todo => (
      <li key={todo.id}>
        {todo.text}
        <button onClick={() => removeTodo(todo.id)}>Remove</button>
      </li>
    ))}
  </ul>
);

const mapStateToProps = (state) => ({
  todos: state.todos,
});

const mapDispatchToProps = {
  removeTodo,
};

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

// components/TodoForm.js
import React, { useState } from 'react';
import { connect } from 'react-redux';
import { addTodo } from '../actions/todoActions';

const TodoForm = ({ addTodo }) => {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    addTodo({
      id: Date.now(),
      text,
    });
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button type="submit">Add Todo</button>
    </form>
  );
};

const mapDispatchToProps = {
  addTodo,
};

export default connect(null, mapDispatchToProps)(TodoForm);

Using the Components

// App.js
import React from 'react';
import TodoList from './components/TodoList';
import TodoForm from './components/TodoForm';

const App = () => (
  <div>
    <h1>Todo List</h1>
    <TodoForm />
    <TodoList />
  </div>
);

export default App;

Summary

In this section, we learned how to connect Redux to a React application using the Provider component and the connect function. We also explored how to map state and dispatch actions to the props of a React component. By following the practical exercise, you should now be able to integrate Redux with your React components to manage the state of your application effectively.

Redux: Connecting to React

Key Concepts

Step-by-Step Guide

Setting Up the Redux Store

Wrapping the App with Provider

Connecting a Component to the Redux Store

Example Component

Reducer Example

Using the Connected Component

Practical Exercise

Exercise: Connect a Todo List Component to Redux

Solution

Summary

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application