Add Redux to a React application
Using the popular create-react-app, we’ll look at each and every step necessary to add state management via Redux. We’ll create an App from scratch, then install redux along with the dependencies needed to make it work with React.
Instructor: [00:00] To get started, we need a React app. We can use npx and the create-react-app package. The only argument we need is the name of the folder. We'll say redux-observable. Once that's complete, if we look, you can see it's given us this directory. Our application lives inside there.
[00:21] If we look at the package.json file, it's given us some scripts like start, so we can run npm start. Then in the browser, you can see the splash screen. It's encouraging us to edit this file to verify everything's working. Let's do that.
[00:40] In the editor, we go to the source directory and find app.js. You can see this is the section of the code that we saw on screen. If we delete that, hit save, you can see that it's now gone in the browser, so everything is working.
[00:53] Now we'll add two packages to use Redux with React. Stop the server for a moment and type npm install redux and react-redux. We'll start the server again.
[01:07] To use those packages, we open up index.js and where we are rendering this app component. We'll wrap this in provider. This is a component that comes to us thanks to the react-redux package, so we can import that. Now, any child component will have access to the store that we give here.
[01:29] To create the store, let's have a separate file called configure-store. We are going to import from Redux the createStore function and combine reducers. Then we'll export our own function.
[01:48] This is going to return a Redux store for us. We'll call createStore. This actually takes a reducer. We'll create a root reducer by calling combineReducers from Redux, and give an object literal, where the keys on the left here are going to be the top-level name in the Redux store, and the values will be the actual reducer that's responsible for handling that piece of state.
[02:16] We'll say app-reducer. We don't have this yet. We go ahead and create a file inside the reducer's folder called app-reducer. We'll export a function that takes some state and an action, and it returns some state.
[02:37] We can give this a default value in case it's never set. Right now, we're just going to say it has a name of Shane. This reducer isn't going to do much right now, but it will give us access to this piece of state inside our components.
[02:50] Back here, we can now import that, and now we have our root reducer. We can pass that to createStore. That's all we need to configure Redux. It now means that anyone can call this function and get back a configured store.
[03:08] Back here, we can do that, import it, and we're good to go. Back in the browser, you can see we have no changes and we have no errors.
[03:17] Let's give our component access to that state. If you go back to the app.js file, you can see that we're exporting app as a default here, but we can call connect from the react-redux package. This allows us to select which piece of state we want to give to this component. For this example, we're just going to say state.app.
[03:41] App here refers to the app that we gave here. Whatever state this reducer is handling is accessible via this app namespace. To prove this component has access to that state, you can just say console.log(this.props). If we hit the browser, you can see we have access to the name property there.