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 : 100 vh;
}
.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: