Welcome back. So we got our app running. Now let's change some source code. Let's go back to the text editor and then let's get rid of all the stuff that we don't need. So you can delete the files like app.cs or whatever. You can delete the files or not or keep them. What I'm going to do is just for the render function, render method of the app, I'm just going to return just a simple div. I'm going to delete everything inside. All right. I don't care about the class name. I just want to do right here. I'm going to type for it at least so there's something there we can see. I don't care about the logo. I don't care about CSS. But if you want to leave it there, it's okay. Just leave the import react. We're going to need JSX and then the component to create a react component from react. That's all we need. Define a react component class component extends component with the render method that returns the template to that component. Okay, we got everything. Now let's go back to index.js. There's a lot of stuff here. I don't care about this. But if you want to leave it, let's just leave it there. We don't care about CSS here, but if you want to leave it there, let's point. Let's leave it like this. We need react. Definitely need it because we're doing JSX. We need the react DOM because we need to inject it into the DOM. Inject the app if you want to leave the index.css. We free do so. I don't really care that we for sure need to import app. And then there's this thing service worker if you want to have to work rough line load faster blah blah blah if you want to leave it just leave it. Anyways, you guys this react DOM render so it's going to grab the div or the element that has the ID root in the HTML and replay and inject the react app there. Okay, so we're good here. Now let's hook up Redux. So we're going to have to install some packages to do that. So let's go here. I'm in the terminal. I'm going to go to a new tab in the project directory for it's saga. I just cleared the screen of the command clear. So we're going to need to Redux, right? So let's install it. npm install. Used to be that we need a dash dash say we don't need it anymore. If you're using node I think since six. So I'm just going to leave it out. But if you're not sure, just leave it. So we're going to do Redux. Okay, the install Redux. Gonna take some time. So what we're going to do is I'm just going to explain what we're going to do next. While it's installing, we're going to hook up create the store with the reducers. Okay. And then we're going to inject that into the react application, we're going to need later react Redux. But for the time being, let's just go back to the code. I am index.js. So we're going to do first create the store. So running port, create store from Redux. Okay, so we're going to need the function here creates start from Redux. Okay. Now right here, after the imports, we're going to call create store. Now create story needs the reducer. So we just could be it's just a simple function, right? That the arguments is the state and the action. Right? So I can just write a simple reducer right here. Also reducer is a function that takes state in an action. And you always return a state, the new state, we can just return state for now. You don't really care about the action yet. So this is the same simple reducer that just returns the state as is without any changes. I can pass that to create store, right? That's the one way to create a store. Now that's all good, we can assign this to a variable called this store. Then now we have to somehow inject the store, make it available to the application. How can we do that? What made to do that is using a knowledge or library called react Redux, react Redux is like the bond, like you can bond bond between react and Redux. So there's a component there called provider. It's a higher order component that you can use here to inject the store into your application. So let's do that. Going back to the terminal, we are going to npm install, react Redux npm install react dash Redux. So this guy has the provider higher order component that will allow us to inject the store to our application. So it's going to take a while here to install it. So app is going to go under the provider. Okay, we're good. React Redux version 5.0.7. Going back to the source code. What we're going to do is the following. Let's go up there. I'm going to import provider. Don't forget the braces. All right. React Redux. So provider for react Redux. It's the higher order component that we're going to wrap around the app right here. Right where you have a react down that render, we're going to take this guy here. Let me break it into multiple lines. I'm going to make a provider and wrap it around the app component. Okay, you can make it multiple lines if you want. Now provider takes a prop and that's called store. So you can just pass the store that you created here as the store prop. Let's do it. Good. Now let's save it. Now we're not going to notice anything happening in the browser if you go there. Let's go to the browser. You just get the fruit list, right? You see it automatically reloaded the app because we're using create react app and it does all this nice stuff for us already. It's probably using react web backdab server or some sort. Anyway, you don't notice anything, but let's open a console here. I just want to open the console web console. Okay. To see some stuff. Let me put the console dock to bottom. So the console is the bottom of the page. There's nothing. So what we want to do is console log the props in the app component to see what's going on there. So let's see. Actually, a little bit don't be anything, right? Because we just have the store and in order for our app to be able to emit actions, we have to use the helper called connect, right? From react redux. That's another helper from react redux called connect that we're going to do to be able to access the state or to dispatch actions. Anyway, I think we're good for this lesson. Let's just review what we did. So we started hooking up redux. And what we did was the following. First, we need to create a store. So create stores from the redux package. So create store requires a reducer. We just created for time being a simple reducer. It's just a function that takes two parameters, the state and the action and returns a new state usually, we'll just return the state the previous as this without any modifications. So create that store, right? But how can we inject the store make it available to the app? Well, not make available but inject it and somehow look it up. We use the provider hierarchy component from the react redux package. All it takes is a prop called store with your store. That's it. And then you wrap around your application component, you're good to go. Now the next steps will be in the next lessons, we're going to learn how to use a connect from the react redux to be able to access the state and to emit or dispatch actions. All right, so see you then.