Providing Dispatch

Developed with
QA

The course is part of this learning path

ReactJS: Zero to Hero
course-steps
14
certification
7
lab-steps
3
description
1
play-arrow
Start course
Overview
DifficultyBeginner
Duration23m
Students47

Description

This module looks at how to manage state in React. You’ll be looking at state management, context, and reducers.  

Learning Objectives 

The objectives of this module are to provide you with an understanding of: 

  • State Management  
  • Context  
  • How to create and provide context  
  • Reducers  
  • How to provide dispatch 

Intended Audience  

This learning path is aimed at all who wish to learn how to use the ReactJS framework.  

Prerequisites

It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience, along with good HTML and CSS skills. 

Feedback 

We welcome all feedback and suggestions - please contact us at qa.elearningadmin@qa.com to let us know what you think. 

Transcript

How component access to the dispatch function, we need to provide it in its own context. On line six, we create context, called dispatch context using the Create context function. Rather than creating a new component, we render a dispatch context provider inside the current courses context, and supply dispatches the value as shown on line 69 on the right hand side of the screen, so that any component can hook into this, we've created a use dispatch context talk that follows the same pattern, as the useCourses context talk shown on lines 88 to 96. The final piece in the puzzle here is to set code in the reducer for the action. We've pulled in some of the code from the Submit form function from the addCourse form component to create an addCourse function on lines 21 to 35. There's more we should add here. But you don't need to understand this to understand the dispatch process. This function is called on line 14 in the courses reducer. We pass it the action payload, and it posts the payload to the server and in the course. We return the previous state, which is the list of courses we retrieved when we first rendered. You may notice that we've exported the get courses function so that a dispatch context can use it to update the courses from outside of this file. And we'll do this as part of the Submit form function in the addCourse form. To hook into dispatch, we've made sure that the addCourse form component route in the app component is now included as a child of the courses provider, giving it access to the dispatch provider that's on lines 30 to 40. In the addCourse form component, we've added the use dispatch context hook, setting it to dispatch, it could be called anything, but it helps with understanding the flow if it keep it consistent, that's on line 12. The submit form function has been modified on lines 21 to 30. You no longer makes an async call posting the data. Instead, it leaves that to the state management we've added. It calls dispatch, when our action of addCourse and a payload of the data from the form. We then change payload to await the call from get courses we've imported. When that's done, we dispatch again, to get the updated list of courses from the server that updates the context and then we reset the form state and set a new state of submitted to true. That's how we can conditionally render a redirect. That's gonna send us back to the search page when the form has been submitted. You can see the data is returned on the console. The submitted logic we've added means that the table is displayed again, complete with our new course. So now you've learned how to manage state and complex applications by using context and reducers. And even seeing how customer hooks are made along the way. You've also seen how to provide context and consume it in the component tree and look at use cases for context and reduces. You're on the way to a really good understanding of React. A little probably this is in order, though, so make sure you go over any materials again.

Lectures

Introduction to State Management - Context - How to Create and Provide Context - Consume Context - Reducers - Actions in Reducers - The useReducer Hook

About the Author
Students2953
Labs8
Courses29
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics