The course is part of this learning path
This module looks at how to manage state in React. You’ll be looking at state management, context, and reducers.
The objectives of this module are to provide you with an understanding of:
- State Management
- How to create and provide context
- How to provide dispatch
This learning path is aimed at all who wish to learn how to use the ReactJS framework.
We welcome all feedback and suggestions - please contact us at firstname.lastname@example.org to let us know what you think.
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.