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.
- Create a new file called
TodoForm.js
in thesrc
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;
- Create a new file called
TodoList.js
in thesrc
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.