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
Students75

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

- [Instructor] Components access to the dispatch function. We need to provide context. On line six, we create context called DispatchContext, using the createContext function. Rather than creating a new component we render a DispatchContext provider inside the current CoursesContext and supply dispatch is the value are shown on line 69 on the right hand side of the screen. So that any component can hook into this we have created a useDispatchContext hook. That follows the same pattern as the useCoursesContext hook showed 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 submitForm function. From the addCoursesForm components 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 parseInt the action payload and it POSTS the payload to the server adding the course. We returned the previous state, which is list of courses we retrieved when we first rendered. You may notice that we've exported to getCourses function so that DispatchContext can use it to update the courses from outside of this file. And we'll do this as part of the submitForm function in the addCourseForm. Talking to Dispatch, we've made sure that the addCourseForm component route in the app component is now included as a child of the CoursesProvider giving it access to the DispatchProvider. That's on lines 30 to 40. In the addCourseForm component we've added the useDispatchContext hook, setting it to dispatch. It could be called anything, but it helps with understanding the flow if you keep it consistent that on line 12. The submitForm function has been modified on lines 21 to 30. It no longer makes an async call posting the data. Instead it leaves that to the StateManagement 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 getCourses 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 so 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. 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 in complex applications by using context and reduces. And even seeing how custom logs 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 are on the way to a really good understanding of React. A little practice 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
Students4323
Labs8
Courses29
Learning paths6

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics