Integrate Redux with React :Step by Step Guide with Example

Integrating Redux with React can significantly enhance the state management of your application and help you maintain a centralized data store. In this step-by-step guide, we'll go through the process of integrating Redux with a React application. For this example, we'll create a simple "To-Do List" application to demonstrate the usage of Redux for state management.

Step 1: Set up a React application

First, make sure you have Node.js and npm (Node Package Manager) installed on your system. If not, download and install them from the official Node.js website.

Now, let's create a new React application using the Create React App tool:

npx create-react-app redux-todo-app
cd redux-todo-app

Step 2: Install Redux dependencies

Inside your project directory, install the required Redux dependencies:

npm install redux react-redux

Step 3: Create the Redux store

Create a new file called store.js in the src directory. This is where we'll define our Redux store and its initial state.

// src/store.js

import { createStore } from 'redux';

// Initial state for the to-do list
const initialState = {
  todos: [],
};

// Reducer function
const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    // Add a new to-do item
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
    // Remove a to-do item
    case 'REMOVE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.payload),
      };
    default:
      return state;
  }
};

// Create the Redux store
const store = createStore(todoReducer);

export default store;

Step 4: Create Redux actions

In Redux, actions are payloads of information that send data from the application to the store. Create a new file called actions.js in the src directory to define the actions related to the to-do list.

// src/actions.js

// Action types
export const ADD_TODO = 'ADD_TODO';
export const REMOVE_TODO = 'REMOVE_TODO';

// Action creators
export const addTodo = (todo) => ({
  type: ADD_TODO,
  payload: todo,
});

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

Step 5: Create React components

Now, let's create the necessary React components for our to-do list application.

1. Create a new file called TodoForm.js in the src directory:

// src/TodoForm.js

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addTodo } from './actions';

const TodoForm = () => {
  const [todo, setTodo] = useState('');
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    if (todo.trim() !== '') {
      dispatch(addTodo({ id: Date.now(), text: todo }));
      setTodo('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={todo}
        onChange={(e) => setTodo(e.target.value)}
        placeholder="Enter a new to-do"
      />
      <button type="submit">Add Todo</button>
    </form>
  );
};

export default TodoForm;

1. Create a new file called TodoList.js in the src directory:

// src/TodoList.js

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

const TodoList = () => {
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  const handleRemove = (todoId) => {
    dispatch(removeTodo(todoId));
  };

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.text}
          <button onClick={() => handleRemove(todo.id)}>Remove</button>
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

Step 6: Connect Redux to the application

In the src/index.js file, we'll wrap our App component with the Provider component from react-redux to connect the Redux store to our application.

// src/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')
);

Step 7: Finalize the App component

Now, we'll create the main App.js component that integrates the TodoForm and TodoList components.

// src/App.js

import React from 'react';
import TodoForm from './TodoForm';
import TodoList from './TodoList';

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

export default App;

Step 8: Run the application

Finally, start the development server and see your Redux-powered to-do list application in action:

npm start

Your application will open in your default web browser, and you can add and remove to-do items using the form and buttons provided.

Congratulations! You've successfully integrated Redux with React application. This is a basic example, but it demonstrates the core concepts of Redux for managing state in larger, more complex applications.

Feel free to build upon this example, add more features, and explore the vast capabilities that Redux offers for state management in your React applications.