From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Create the reducer function

Create the reducer function

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Create the reducer function

“

Our goal in this session is to create a reducer function for our to-do list application. This will allow us to manage the state of our to-do list in a clean, organized, and efficient way using React's UseReducer hook. Let's create a folder Reducers inside the src folder and a file TaskReducer.js inside it. Moving to TaskReducer.js Ok, let's initialize the TaskReducer function. It takes the current state and an action as arguments. Now you will see that I've added a variable updatedTasks to hold the new state after any action. This is a good practice because it keeps the logic clean and easy to follow. I am adding a switch statement to handle different action types. Each case will correspond to a specific action that can modify our task list. The default case simply returns the current state if no matching action is found. To complete the reducer function, I'll return updated tasks. This is the updated state that will replace the previous state. Here I am adding a call to…

Contents