VOOZH about

URL: https://www.coursera.org/learn/packt-redux-state-management-and-advanced-react-concepts-fohbl

⇱ Redux, State Management, and Advanced React Concepts | Coursera


Redux, State Management, and Advanced React Concepts

Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

Redux, State Management, and Advanced React Concepts

Included with

β€’

Learn more

Ask Coursera

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

1 week to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

1 week to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

What you'll learn

  • Build real-world React applications with advanced features like routing, user authentication, and payment processing.

  • Learn how to create dynamic applications with Redux Toolkit, including mutations and caching.

  • Master the use of React Query for handling asynchronous requests and managing server state.

  • Understand Redux fundamentals and integrate it into React for efficient state management.

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

11 assignments

Taught in English

Build your subject-matter expertise

This course is part of the React Bootcamp with .NET API (Router, Redux Toolkit, Hooks) Specialization
When you enroll in this course, you'll also be enrolled in this Specialization.
  • Learn new concepts from industry experts
  • Gain a foundational understanding of a subject or tool
  • Develop job-relevant skills with hands-on projects
  • Earn a shareable career certificate

There are 9 modules in this course

This course features Coursera Coach!

A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. Master advanced state management in React using Redux and React Query. Learn how to integrate Redux with React, manage state efficiently with Redux Toolkit, and handle asynchronous data fetching with React Query. This course covers Redux slices, mutations, and caching, along with real-world applications like TravelOPedia, ProjectOPedia, and a restaurant website to reinforce your skills. You’ll dive into advanced topics like API requests, routing, and creating dynamic, user-friendly features. By the end, you’ll be equipped to manage state in large-scale React apps and handle complex features such as user authentication, payment systems, and API integration. Designed for intermediate developers familiar with React, this course helps you enhance your state management skills and build scalable applications. By the end, you’ll be able to manage state with Redux, perform data fetching with React Query, and implement dynamic features like authentication and payments.

In this module, we will guide you through the process of integrating Redux into your React applications. You'll learn how to set up a Redux store, create reducers, and dispatch actions to manage application state. By the end of this section, you will be well-versed in using Redux to manage complex state in React applications.

What's included

17 videos2 readings1 assignment

17 videosβ€’Total 69 minutes
  • Set Up ReduxOPediaβ€’5 minutes
  • Add Redux Storeβ€’5 minutes
  • Create First Reducer and Actionsβ€’9 minutes
  • Log State and Dispatch Actionβ€’3 minutes
  • Retrieve Value from Stateβ€’3 minutes
  • Dispatching Action from React Componentβ€’4 minutes
  • Assignment 16 - Counter Multiplierβ€’4 minutes
  • Assignment 16 Solution - Counter Multiplierβ€’3 minutes
  • Add Destination Sliceβ€’3 minutes
  • Display Destinationsβ€’4 minutes
  • Select Destinationβ€’4 minutes
  • Display Selected Destinationβ€’3 minutes
  • Reset Counter and Destinationβ€’5 minutes
  • Listen to Actions of a Different Reducerβ€’4 minutes
  • Say NO to Magic Stringsβ€’2 minutes
  • Custom Actionsβ€’5 minutes
  • Alternative Approach for Import and Exportβ€’3 minutes
2 readingsβ€’Total 20 minutes
  • Introduction to the Course 'Redux, State Management, and Advanced React Concepts'β€’10 minutes
  • Full Specialization Resourcesβ€’10 minutes
1 assignmentβ€’Total 15 minutes
  • ReduxOPedia - Redux and React - Assessmentβ€’15 minutes

In this module, we will focus on using Redux Toolkit and RTK Query to manage asynchronous operations in a React application. You’ll learn how to set up slices, make API calls, and implement queries and mutations. By the end of this section, you'll have a strong understanding of handling data fetching, caching, and mutations in your React apps using Redux Toolkit.

What's included

20 videos1 assignment

20 videosβ€’Total 79 minutes
  • Set Up TravelOPediaβ€’5 minutes
  • Set Up Destination Componentsβ€’3 minutes
  • Set Up JSON Serverβ€’5 minutes
  • Create Destination APIβ€’10 minutes
  • Fetch Records from APIβ€’5 minutes
  • Add Destination Controller Componentβ€’2 minutes
  • Add Mutationsβ€’4 minutes
  • Call POST Mutationβ€’5 minutes
  • Query Versus Mutationβ€’1 minute
  • Caching with RTK Queryβ€’5 minutes
  • Tags in Actionβ€’6 minutes
  • Assignment 17 - Delete Destinationβ€’1 minute
  • Assignment 17 Solution - Delete Destinationβ€’2 minutes
  • Response from Query and Parametersβ€’2 minutes
  • Separating Out Individual Destinationβ€’2 minutes
  • Assignment 18 - Edit Functionalityβ€’1 minute
  • Assignment 18 Solution - Edit Functionalityβ€’9 minutes
  • Integrate RTK Query with Redux Storeβ€’6 minutes
  • Call Another APIβ€’3 minutes
  • Show Random Destinationβ€’3 minutes
1 assignmentβ€’Total 15 minutes
  • TravelOPedia - Redux Toolkit, Query, Mutations, and Slice - Assessmentβ€’15 minutes

In this module, you will create ProjectOPedia, a dynamic portfolio page where you can showcase your course projects. You'll learn how to map through your project list, dynamically render project cards, and implement routing for project details. This section will enhance your React skills while building a portfolio-worthy project.

What's included

7 videos1 assignment

7 videosβ€’Total 26 minutes
  • Introductionβ€’1 minute
  • Create ProjectOPediaβ€’2 minutes
  • Header and Footerβ€’5 minutes
  • Map through Project Listβ€’6 minutes
  • Project Listβ€’6 minutes
  • Add Routingβ€’4 minutes
  • Topics Coveredβ€’2 minutes
1 assignmentβ€’Total 15 minutes
  • ProjectOPedia - Assessmentβ€’15 minutes

In this module, we will guide you through setting up the basic structure of a .NET API, including creating the project, configuring the database, and implementing essential functionality. You'll also learn how to work with Azure storage for file handling and set up migrations for your database schema, preparing the foundation for more advanced features in the API.

What's included

13 videos1 assignment

13 videosβ€’Total 61 minutes
  • API is Optional and You Can Use the API Right Hereβ€’7 minutes
  • Set Up Storage Account for Images on Azureβ€’3 minutes
  • Create API Projectβ€’2 minutes
  • Install NuGet Packagesβ€’2 minutes
  • Set Up Connection String and DBContextβ€’6 minutes
  • Create SQL Tables and Push Migrationsβ€’8 minutes
  • Add Name to AspNetUsersβ€’4 minutes
  • Create Menu Item Tableβ€’4 minutes
  • Seed Menu Itemsβ€’4 minutes
  • Get Menu Item and API Responseβ€’6 minutes
  • Get Individual Menu Itemβ€’4 minutes
  • Add Storage Account Connection Stringβ€’6 minutes
  • Implement Blob Serviceβ€’4 minutes
1 assignmentβ€’Total 15 minutes
  • .NET API - Basic Setup - Assessmentβ€’15 minutes

This module focuses on building the menu item functionality for your .NET API. You will learn how to create, update, and delete menu items, and implement API endpoints for these actions. By the end of this section, you’ll have the skills to manage menu items effectively and ensure proper API response handling.

What's included

5 videos1 assignment

5 videosβ€’Total 23 minutes
  • Create Menu Itemβ€’10 minutes
  • Create Menu Item in Actionβ€’2 minutes
  • Update Menu Itemβ€’7 minutes
  • Delete Menu Itemβ€’3 minutes
  • Correct Status Code and Success Flagβ€’1 minute
1 assignmentβ€’Total 15 minutes
  • .NET API - Menu Item - Assessmentβ€’15 minutes

In this module, you will learn how to secure your .NET API by implementing authentication and authorization using JWT tokens. We will guide you through the process of setting up login and register endpoints, as well as securing resources to ensure that only authorized users can access protected routes.

What's included

8 videos1 assignment

8 videosβ€’Total 46 minutes
  • Add Login and Register DTOsβ€’4 minutes
  • Auth Controller and Dependency Injectionβ€’5 minutes
  • Register in Actionβ€’11 minutes
  • Login in Actionβ€’4 minutes
  • JWT Tokenβ€’7 minutes
  • Add Authentication and Authorization Endpointsβ€’5 minutes
  • Set Up API for Authenticationβ€’3 minutes
  • Add Security to Swaggerβ€’7 minutes
1 assignmentβ€’Total 15 minutes
  • .NET API - Authentication and Authorization - Assessmentβ€’15 minutes

In this module, you will implement shopping cart and order management features in your .NET API. You will learn to add items to the cart, place orders, and manage order details. This section also covers integrating Stripe for secure payment processing, ensuring your application supports a complete e-commerce workflow.

What's included

14 videos1 assignment

14 videosβ€’Total 70 minutes
  • Add Shopping Cart Modelsβ€’8 minutes
  • Shopping Cart Controller and Logicβ€’4 minutes
  • Update Shopping Cart Endpointβ€’11 minutes
  • Test Shopping Cart Endpointβ€’3 minutes
  • Get Shopping Cartβ€’5 minutes
  • Order Header and Details Modelβ€’5 minutes
  • Order DTOsβ€’3 minutes
  • Get Orderβ€’4 minutes
  • Create Order in Actionβ€’6 minutes
  • Update Order Detailsβ€’4 minutes
  • Stripe Payment Endpointβ€’6 minutes
  • Stripe Client Secret in Actionβ€’6 minutes
  • Shopping Cart API Updateβ€’2 minutes
  • Deploy APIβ€’5 minutes
1 assignmentβ€’Total 15 minutes
  • .NET API - Shopping Cart and Order - Assessmentβ€’15 minutes

In this module, we will walk you through creating a homepage for the Red Mango website using TypeScript and Bootstrap. You'll learn how to structure your project, fetch data for dynamic content, and implement reusable components that enhance the user experience. This section will give you hands-on experience in building a visually appealing and functional homepage.

What's included

13 videos1 assignment

13 videosβ€’Total 50 minutes
  • Typescript Introductionβ€’4 minutes
  • Create App with TypeScriptβ€’2 minutes
  • Package JSONβ€’2 minutes
  • File Cleanupβ€’3 minutes
  • Install Bootstrap and Bootstrap Iconsβ€’3 minutes
  • Header and Footer Componentβ€’5 minutes
  • Header UIβ€’3 minutes
  • Fetch Menu Items and Interfaces in TypeScriptβ€’7 minutes
  • Better Structureβ€’4 minutes
  • Card Componentβ€’4 minutes
  • Homepage UIβ€’3 minutes
  • Add Routing and Not Foundβ€’6 minutes
  • Menu Item Details Pageβ€’5 minutes
1 assignmentβ€’Total 15 minutes
  • Red Mango - Homepage - Assessmentβ€’15 minutes

In this module, we will teach you how to set up Redux and RTK (Redux Toolkit) in your restaurant website project. You’ll learn how to fetch menu items, display them dynamically, and manage data with Redux. This section will help you efficiently manage state and API data to create a responsive, real-time restaurant website.

What's included

7 videos1 reading3 assignments

7 videosβ€’Total 29 minutes
  • Add Redux and Redux Toolkit to Projectβ€’7 minutes
  • Add Query to Fetch Menu Itemsβ€’7 minutes
  • Call Slice to Fetch Dataβ€’4 minutes
  • Display Loading Textβ€’1 minute
  • Assignment 19 - Load Menu Item Detailsβ€’1 minute
  • Assignment 19 Solution - Load Menu Item Detailsβ€’6 minutes
  • Manage Quantity on Menu Item Detailsβ€’4 minutes
1 readingβ€’Total 10 minutes
  • Conclusion to the Course 'Redux, State Management, and Advanced React Concepts'β€’10 minutes
3 assignmentsβ€’Total 90 minutes
  • Full Course Practice Assessmentβ€’15 minutes
  • Set Up Redux and RTK - Assessmentβ€’15 minutes
  • Full Course Assessmentβ€’60 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Packt
1,946 Coursesβ€’575,115 learners

Explore more from Software Development

Why people choose Coursera for their career

πŸ‘ Image

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
πŸ‘ Image

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
πŸ‘ Image

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
πŸ‘ Image

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Frequently asked questions

Redux, State Management, and Advanced React Concepts is a course designed to deepen your understanding of state management and enhance your React skills. Redux is a state management tool that enables efficient management of application data, especially in complex React applications. This course covers integrating Redux with React, using Redux Toolkit for optimized state management, and implementing advanced techniques like queries, mutations, and asynchronous calls. Understanding state management in React is crucial for building scalable and maintainable web applications.

This course provides an in-depth exploration of Redux and state management in React applications. It guides you through building real-world applications like ReduxOPedia and TravelOPedia, where you will learn how to integrate Redux, use Redux Toolkit, handle asynchronous data fetching with queries and mutations, and manage complex application states. Additionally, the course also covers how to enhance UI development using TypeScript and Bootstrap, making it an all-encompassing guide for modern React development.

Upon completion of this course, you will be able to manage the state in React applications effectively using Redux and Redux Toolkit. You will also gain expertise in handling asynchronous actions using queries and mutations and optimize data fetching in large-scale applications. Additionally, you will be able to integrate Redux with React for efficient state management and apply these concepts in building scalable projects like an interactive menu or a dynamic shopping cart.

To get the most out of this course, you should have basic experience with JavaScript, React, and front-end development. Familiarity with concepts like components, props, and state in React will be helpful. A general understanding of JavaScript ES6 features (like arrow functions and destructuring) and asynchronous programming will be beneficial. Basic knowledge of RESTful APIs and how to interact with them will also help when working with queries and mutations in Redux.

This course is for intermediate to advanced developers who want to master state management with Redux in React applications. It's perfect for React developers looking to learn best practices in managing complex application states and handling asynchronous data. Whether you are looking to improve your React skills, learn Redux, or implement advanced state management techniques, this course provides the knowledge to take your web development skills to the next level.

The course is approximately 7 hours long, which includes video lessons, assignments, and practical exercises. Depending on your pace and prior experience with React and state management, you may need additional time to practice and apply the concepts taught in the course.

Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.

If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.

Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.

If you complete the course successfully, your electronic Course Certificate will be added to your Accomplishments page - from there, you can print your Course Certificate or add it to your LinkedIn profile.

This course is currently available only to learners who have paid or received financial aid, when available.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Financial aid available,