- [Instructor] The useReducer hook, is one of the hooks built into React. It's alternative to the useState hook, it needs to be passed to reduce a function and can be optionally passed in an initial state. Whereas the state valuing in useState is paired with a set function. They useReducer state value is paired with a dispatch function. It's the dispatch function, that allows the sending of action objects to update the state. It's widely accepted that useReducer is preferred to useState when this complex state logic. The next state may depend on the previous one and there maybe a number of sub values. It helps in complex component structures because the dispatch function can be provided rather than passing a callback through multiple layers using props. Calling dispatch has the same rendering effect as calling set state. On a performance note, if the dispatch call produced the same status before, React won't rerender child components or fire any effects. React may need to render the specific component again though before bailing out. If we're dealing with state for a provider component, the useReducer hook can be used here. The example shown has useReducer, plus the myReducer function, and setting state to initialState. Instead of the value attribute of the contextProvider being a static value, it's now whatever the useReducer hook has returned as the state value. As this is a component, you could use a user fact hook to make a call after it's initial render, to get some asynchronous data. The effect could then call dispatch with the action, and a payload of that return data. So here, we show the code to allow the course data to be once again retrieved from our restful endpoint. The first thing we'll look at here, is how we actually make that call. It's in the get courses function, defined between lines 20 and 37. The main job of this function is to get the payload for the action getCourses. The majority of this code, is from the getCourses function that had been used in the fact will courses table setting of state. The function is still a sync and we make a fetch call to the data end point. We handle a good response by setting payload to respond stock Jason. When we handle non good responses, we set a payload to be an array with an object that has a status and a message in it. Remember, the filterable courses table we'll look for a course array with its first element as an object with a status of key. Well, that's done now and we'll display era components. We've surrounded the whole response handling and a try block and if we get an error not related to the status, we set a payload to a five O three status with a message for it. At the end of the function, we return the payload. So that's how we get the data. We've extended the courses provide a component online 39 to 57 to include the useReducer hook. We pass the courses, reduce the functioning and set the initial state to be an object that has a course is key and an empty array. That's how the Logan message can be displayed, while we wait for the data to arrive. There's a user fact hook in this component too, that defines a sync function that sets the payload by awaiting the return of the get courses function. Once we have that data, we call dispatch with the actual object that's set to have a type of get courses and of course our payload. Dispatch fires the courses reducer function, and you can see that we have now put a return on the get cost is action type. To construct an object taking the previous state and adding a key of courses with the actions payload as the value. When we look at the app in the browser now, we can see that the course data has been provided using context and the state of the context is set by the reducer. That's shown in the details on the right where the course has provided a component is showing that it has a reducer hook. This has the cost within it. Let's refresh the app. We've left the timeout on the async call, so you can see what happens is the data is weighted on. If we turn off the Jason server and refresh the app again, you can see that the 505 error is returned. So now we've been able to use context and reduces to provide data by a state in a component that's only there for doing just that, but to make the submit function of the form work using the reducer, we need to look at providing the dispatch function so it can be fired somewhere other than the courses provider component.

Lectures

Introduction to State Management - Context - How to Create and Provide Context - Consume Context - Reducers - Actions in Reducers - Providing Dispatch