What are Action’s creators in React Redux?

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 example 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 file name todeAction.js.
• Inside the reducers folder create file name todoReducer.js.
• Inside the constants folder create file name TodoActionTypes.js.
• In the src folder create store.js file.

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;

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;

  }

Start your application using the following command.

npm start

Output:

Output