In React, we can dispatch actions to the reducer in the following way:
Dispatch actions using Redux
Dispatch actions using the useReducer hook
Here we discuss a Task Register that allows users to add new tasks and display them on the page. In this example, we use Redux for state management and learn both the above way to dispatch an action.
When working with Redux, dispatching actions involves the following steps:
Create an action: It carries the type and payload of information from your application to the store:
const Task = 'Task';export const Task_action = (task) => {return {type: Task,payload: task};};
In the preceding code, we create the Task_action action which takes task as an input parameter.
Implement the reducer: It takes two parameters, the action method and the current state, and returns a new state:
const initialState = {task_list: []};const reducer = (st = initialState, myAction) => {switch (myAction.type) {case 'Task':return {...st,task_list: [...st.task_list, myAction.payload]};default:return st;}};export default reducer;
In the preceding code, we create reducer function which takes st and myAction as a parameter and return a new updated st.
Connecting components: Connect components to the Redux store. By using the connect function from the react-redux package, we can connect our component to the store. This allows components to dispatch actions:
// MyComponent.jsimport React, { useState } from 'react';import { connect } from 'react-redux';import { Task_action } from './actions';const MyComponent = ({ task_list, dispatchNewTask }) => {const [newTask, setNewTask] = useState('');const handleAddTask = () => {if (newTask.trim() !== '') {dispatchNewTask(newTask);setNewTask('');}};return (<div><h1>Task Register</h1><ul>{task_list.map((tsk, index) => (<li key={index}>{tsk}</li>))}</ul><inputtype="text"value={newTask}onChange={(e) => setNewTask(e.target.value)}/><button onClick={handleAddTask}>Register your Task</button></div>);};const mapStateToProps = (state) => {return {task_list: state.task_list};};const mapDispatchToProps = (dispatch) => {return {dispatchNewTask: (text) => dispatch(Task_action(text))};};export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
In the preceding code, we create MyComponent function, which allows the user to register a new task. From lines 42 to 46 we dispatch Task_action action and in line 48 connect the MyComponent to store.
The below playground contains the complete code in action:
When the handleAddTask is invoked, it triggers the dispatchNewTask which dispatch Task_action method.
useReducerIn React, the useReducer hook allows us to manage the state within a component by providing a simplified version of the Redux pattern.
When working with useReducer, dispatching actions involves the following steps:
Create the reducer: Reducer function specifies how the state will change when the action function invoke:
const reducer = (st, myAction) => {switch (myAction.type) {case 'Task':return {...st,task_list: [...st.task_list, myAction.payload]};default:return st;}};
In the preceding code, we create the reducer function which takes st and myAction as a parameter and return a new updated st.
Initialize state and dispatch: Functional component uses the useReducer hook to initialize the state and get a dispatch function:
// MyComponent.jsimport React, { useReducer, useState } from 'react';const initialState = {task_list: []};const MyComponent = () => {const [myState, dispatch] = useReducer(reducer, initialState);// ...};
In the preceding code, useReducer hook takes the reducer function and the initialState as arguments and return the current myState and dispatch function.
Dispatch an action: To dispatch an action, call the dispatch function and pass the action object as an argument. The action object should have a type property that describes the action and an optional payload property that carries additional data:
const MyComponent = () => {//rest of code aboveconst handleAddTask = () => {dispatch({ type: 'Task', payload: newTask });};//rest of code below};
In the preceding code the handleAddTask will invoke dispatch an action and take an object with type and payload properties as an argument.
The below playground contains the complete code in action:
In the preceding code, we create the MyComponent function, which allows the user to add a new todo. From lines 27 to 29, the handleAddTask method invokes the dispatch function, which triggers the reducer method to update the state of the app.
Free Resources