What are Action's creators in React Redux?

Last Updated : 26 Jul, 2024

In React Redux, action creators are functions that create and return action objects. An action object is a plain JavaScript object that describes a change that should be made to the application's state. Action creators help organize and centralize the logic for creating these action objects.

Action Creators

Messengers with a Purpose: Action creators are like messengers in your app. They're responsible for delivering a message about what should happen next.
Instructions for Change: When something in your app needs to change, an action creator steps in to create a clear set of instructions, known as an "action."
Decide and Describe: Action creators help you decide what action to take and describe it in a way that your app can understand.
Easy Communication: They make communication between different parts of your app smoother by providing a standardized way to express intentions.
Initiating Change: Action creators as the ones who kickstart the process when your app needs to do something new or update information.

Action's creators in React Redux

Purpose: Action creators simplify creating and dispatching actions in React Redux.
Action Object: They generate action objects, which describe changes in the application.
Simplifies Dispatch: Action creators make it easier to dispatch actions without manually crafting every action object.
Improves Maintainability: Centralizing action creation in action creators enhances code maintainability, especially when action structures change.
Encourages Consistency: Action creators promote a standardized approach to action creation and dispatching throughout the application.

Example: Below are the examples of Action's creators in React Redux.

Install the following packages in your React application using the following command.

npm install react-redux
npm install redux

Create the folder inside the src folder i.e. actions, reducers, and constants.
Inside the actions folder create a file name todeAction.js.
Inside the reducers folder create a file name todoReducer.js.
Inside the constants folder create a file named TodoActionTypes.js.
In the src folder create store.js file.

CSS

/* TodoList.css */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .todo-list {
    max-width: 400px;
    width: 100%;
  }
  
  button {
    margin-top: 5px;
    background-color: blueviolet;
    color: white;
    padding: 5px;
    border: 2px solid grey;
    border-radius: 5px;
    
  }

JavaScript

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

const store = createStore(todoReducer);

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

JavaScript

// App.js
import React from "react";
import "./App.css";
import TodoList from "./components/TodoList";

const App = () => {
return (
<>
	<TodoList/>
</>
);
};

export default App;

JavaScript

// src/constants/TodoActionTypes.js

export const ADD_TODO = 'ADD_TODO';
export const REMOVE_TODO = 'REMOVE_TODO';

JavaScript

// src/reducers/todoReducer.js
import { ADD_TODO, REMOVE_TODO }
	from "../constants/TodoActionTypes";
	
const initialState = {
	todos: []
};

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

export default todoReducer;

JavaScript

// src/actions/todoActions.js

import { ADD_TODO, REMOVE_TODO }
	from "../constants/TodoActionTypes";

export const addTodo = (text) => ({
	type: ADD_TODO,
	payload: { text }
});

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

JavaScript

// src/components/TodoList.js
import React from 'react';
import { useDispatch, useSelector }
	from 'react-redux';
import { addTodo, removeTodo }
	from '../actions/todoActions';
import './TodoList.css';

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

	const handleAddTodo = () => {
		const text = prompt('Enter todo:');
		if (text) {
			dispatch(addTodo(text));
		}
	};

	const handleRemoveTodo = (id) => {
		dispatch(removeTodo(id));
	};

	return (
		<div className="container">
			<div className="todo-list">
				<h1>To-Do List</h1>
				<button onClick={handleAddTodo}>
					Add Todo
				</button>
				<ul>
					{todos.map(todo => (
						<li key={todo.id}>
							{todo.text}
							<button onClick={() =>
								handleRemoveTodo(todo.id)}>
								Remove
							</button>
						</li>
					))}
				</ul>
			</div>
		</div>
	);
};

export default TodoList;

JavaScript

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

const store = createStore(todoReducer);

export default store;

Start your application using the following command.

npm start

Output:

What is Redux Thunk?

faheemakt6ei

Improve

Article Tags :

What are Action's creators in React Redux?

Action Creators

Action's creators in React Redux

Similar Reads

Getting Started with React & Frontend

Redux Setup and basics

Express and Mongo Setup

API Routing and Authentication

Postman- Backend Testing

Thank You!

What kind of Experience do you want to share?