- [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