Combining useContext and useReducer to Make Initial App State

Reed Barger
A free video tutorial from Reed Barger
Professional Web and Mobile Developer
4.3 instructor rating • 21 courses • 38,656 students

Learn more from the full course

React Hooks

Learn the future of creating React apps today!

03:05:33 of on-demand video • Updated December 2019

  • Understand how React Hooks work in-depth
  • Build impressive, real-world applications with React Hooks
  • Use React Hooks in place of previous libraries and patterns (i.e. Redux, Higher Order Components, etc.)
English [Auto] We've taken a brief look at the used context hook and the user reduce or hook. Now to use both of these in combination to set up the basic state of our app We'll start by in our source folder removing our app component entirely or move all of the code as well as our example with the user context provider. And instead of importing an app component we're just going to create it here within the index component or the index file I should say will begin by recreating our app component. It'll be a function component. And here's where we're going to use both the user context hook and the use reduce her hook. But the context that we create as well as the reducer function we both live in separate files. So in our source folder we're going to create context yes and reduce or dodgy as so we'll start with context. Yes and here's where we're going to create our react context and make it available to other files in order to consume. So we'll import up at the top re-act we'll call create context on react and here within that context we can pass an object and set up some initial state. As I mentioned we'll be creating a to do application. So we'll create a property on this object which will be an array and we'll create a few initial to do's which will be objects consisting of a number of properties first. Each to do will have an ID. So our first to do we'll have an idea of one will have a Text property and say for the first one it's eat breakfast and we'll have a property which will tell us whether the to do is complete or not. So for this first one it will be false. Then we can copy this and create another one. And a third. So the second one will have an idea to give it its own text say do laundry and complete will be false again. The third one the ideal will be three. The text will be say finish project and complete here will be set to true. So this is our initial state that we're passing to create context and then we'll get back our to Doo's context and we'll make this available for other components with export default to Dewes context then introducer dodgiest will create our reducer and we'll write this as a function declaration so we can say export default. And once again we'll call this function reducer. It'll take state and an action set up set up or switch statement which according to the action type for our action. And for now it will just set up a default case where we're going to return the state that's passed to our producer. So then back in index yes or first import to is context from dot slash context and then our reducer which we'll call to Doo's producer from dot slash reducer. Then in our app component we can combine the two Hurstville call it use context of and are to do context and from that we will get our initial state. So once again all of the initial state is going to be returned is coming from the call to create context and the initial state will be the object with that to do right. And it so will then call use reducer which will first take our producer what you're called to do is reduce or and it needs some state or pass that initial state and then from user douceur we get state and then the dispatch function. So now we're using to do context within Rander we can create our provider so be to do context provider well wrap or app component with it but actually instead of including our provider here and render like we did before let's just render the app component and within its return set up our provider and then make the state and the dispatch function available to all the components between these provider tags. So to value the pass as an object state and dispatch so include another set of curly braces here and between the tags we can just return all of the components in our app or at least all the top level components in our app. So first create a component's folder for components to live in and for now lets make one component to do list which is where will display all of our dues go up at the top will important react write this as a function component and actually rewrite this as a function declaration and make sure to export it with export default and then an index such as we can import this component import to do list from dot slash components slash to do list and then put it between our provider tags and now into duelist we want to consume the values that we're passing down state and dispatch. And when we consume state we want to display and to do list our initial to do is so from context I guess we need to import our exported to do context going to do list or import to use context from doctors slash context to consume our context will need the user context. So up at the top of to do list we'll call use context pass it our entire context and we'll get back from this function call the two things that we passed to the value attribute of our provider state and dispatch. So to do this we can the structure of the object that we get state and dispatch we don't need dispatch just yet since we just want to take our state and displayer to do our initial to do. So we're just going to return a div which will contain a unordered list and here's where we can take our state on it. We have to do array. We're going to map over our two dues for each to do we'll have an ally which will have a key prop or key attribute set to to do that Id then within the live for now will include a span which is where we'll show or to do text we have to do that text. Now it's save all of our files and back to our browser and we should see our initial array of dues displayed on the page.