Add Redux to a React application

First, we'll install create-react-app, which will allow us to scaffold our default React application. We'll type yarn global add create-react-app. Now, we can use that to create the application. Create-react-app, and we'll call it Redux observable.

Now, we can move into that new directory. If we list the files, you can see that we have a default application. We can test this working by typing yarn start. Now, we can see we have a development server at this address. If we open that in the browser, you can see the application running.

Now that we have this, we can go ahead and add Redux to it. We'll stop the server for a moment, and then we'll install Redux and React-Redux. Now, let's open up to the editor, and go to the file source index.js. This is where we can bring in Redux.

We'll import create-store from Redux, and the provider from React Redux. Now, to actually create a store, we'll need a reducer. We'll create one in a directory called reducers. We've called this storage reducer, and we're going to render out a list of stories.

We have our initial state here, which has an items array that is currently empty, and we use that as a default parameter here. When this function gets called, if state has not previously been set, it will use this initial state here. For now, we'll just return this state, not modifying the anything.

Now that we have this reducer, we can use it when we create a store. We can stay store is equal to create-store, and we'll pass in the reducer, which we'll import here. Here, you can see we're getting a warning from the editor. That's because we're not exporting a default from this module, so let's export the same thing, but as a default.

Next, we'll use the provider from React-Redux to wrap our application. We pass it the store that we created. Now, any components within the application will have the ability to connect to the Redux store.

To see that in action, let's jump over the app.js, and we'll just remove all of this boilerplate, including this logo. Now, we'll create a stories component, and we're going to connect this component to the Redux store.

Let's create a directory called components. Inside there, we'll create stories.js. We'll import React and connect from React-Redux, and then we'll export a function called stories. It takes in some props. For now, we're just going to return a stringified version of our props.

At the moment, we're not passing any props to the stories component, as we want to get them from the Redux store. We do that by using this connect method. We'll add a default export which is the result of calling connect, and passing in our stories component.

Then we need to be explicit about which parts of the store do we want connecting to this component? For now, we'll just take everything. We'll pass this in as the first parameter to the connect method. Now, this module has two exports. It as the regular function here, but it also has the connected component as the default.

Now, back in app, we can now import. Then if we view it in a browser, you can see, whilst it center-aligned, it is giving us what we expect. It's giving us the state as it defined from this reducer.