4.1 Refactor Our Application for Growth

At the end of the previous lesson we talked about how even though our application doesn't do very much yet, it still completes the circle as far as application structure goes. It really is using all of the core features of Redux and React. We're using Redux for one-way data flow. We've created a store that holds the current state. We've given that store reducers to show it how to change that state when actions occur. And of course, we've created action creators to make those actions even easier to make. Then we've seen how we can use React components both to display the data and to react to changes in the state. Now so far we've done all of this in a single file. However, at this point our application is still very small. It's going to grow quite a bit before our project is done. So I think right now we're at this great point in our application where all of the moving parts are in place and we kinda have a very basic prototype. We can see how they're all gonna work together. However, it's still small enough that everything can fit in a single file. But of course, that is going to change drastically in the next couple of lessons as we begin to build more and more components and moving parts. So we're gonna pause development here and we're going to actually break our single file here into multiple different files. And this way as our application grows, we'll feel a little bit more organized. All right, so there are a couple of obvious things first. Let's create inside the source directory a new file called actions.js. This is where our action creators are gonna go. Now these three functions are currently at the top of our file, so I'll just move those over to our actions file here. And because of the way we've written them, it's very easy to export these from this file. We can just say export at the beginning of each line. So we're exporting these three functions. All right, and now if we come back to our file here, we can do import. And if we import them using the destructuring syntax, we can say import { addDeck, import showAddDeck, and import hideAddDeck } from './actions' file. Then our application actually doesn't break at all because in this file before we had these three constants that we were using. Now we've just pulled them into a different file, but we can still access them by the same name within this file. So if we come back here and go through our application one more time, you can see that those actions are still working even though they're in a separate file. So that was really easy. Let's do the same thing with reducers. So let's say a new file called src/reducers.js, and this is a little bit more to move. Let's see, what do we have? We have our cards reducer, our decks reducer, and our adding deck reducer. So let's move those over here. And again, since these are all constants that are functions, we can just put the export keyword at the beginning of each line. Now we'll import this one a little bit differently. We can say import * as reducers from './reducers'. And when we import * as reducers, it will import all of those functions and create a reducers object here, and those are all properties of that. Well, that object with each one of these functions as the properties of the object is exactly what we need to pass to Redux.combineReducers. So we can just remove this whole object here that we've given to combineReducers, and we can pass it the reducers object that we're importing from our reducer's file. Let's give this another try. As you can see, well, we know right away this is working just because we have our object showing up correctly here from the very first render. Next thing we're going to talk about is the libraries that we're using. Right now we're pulling react, react-dom, and redux in through script tags. However, this isn't really the practice we use nowadays. Instead we're going to import them through NPM. So let's head over to a terminal and let's do npm install. And we will install react, we will install redux, and we will also install react-dom. All right, with those installed, we can come back here and we'll remove the script tags from our index.html file. But before things will actually work, we need to import these in app.js. So we'll import React from 'react'. We'll import ReactDOM from 'react-dom'. And Redux is actually a little bit different. We can't just say import Redux from 'redux'. Instead, we have to say import * as Redux from 'redux', and that's just because of the way that things are exported in that library. All right, so with these things in place, we should be able to come back to the browser. And if we look at our elements here, you can see that the only script tag we have is our bundle.js file. However, everything is still working. I can choose to add a new deck to our list, and everything is still running as we would expect. Let's change something else with our Redux import here. Instead of importing everything from Redux, a common pattern is to just import the things you need, and you'll see this in a lot of Redux tutorials. So we could just import createStore and import combineReducers. And now we don't call Redux.createStore, we just call createStore. And we don't call Redux.combineReducers, we just call combineReducers. So that can clean things up a little bit more. The other thing we have to talk about here is moving components. We have our app and sidebar component. So let's see if we can move those to new files. Let's create a directory for our components because we're gonna have so many of them. We'll make a directory, src/components. So now let's create a new file, src/components/App.js, and let's just move this right here. I'll take it out of here, paste it in here. And because this is the only thing we want to export from this, we can say export default App. Now there is going to be a problem here, and let's see what this is. First I'll come back here to our first app.js file. Maybe we should change this to main.js. And I'll import App from './components/App'. And if we come back to the browser now, notice that we have React is not defined. And if we look at where this is, you can see this is right where we defined our App component and it says React.createElement. This is something that might trip you up the first time you're doing something like this, but it's actually something really easy. The problem is, of course, that where we have JSX these are actually veiled function calls to React functions, right? So we'll just have to import React at the top of this file, and now if we go back you can see that everything is working as you would expect. All right, so we've exported our App component. Let's look at our Sidebar component here. There are a few more moving parts here, but I think we should be able to do this just fine. Of course, we'll need React, and because we're using ReactDOM, we'll also need that, but that won't be a problem. So let's create a new file here src/components/Sidebar.js, and I will copy or two imports from the top of our app.js file. And now let's copy our whole sidebar here, take that out, paste that here. And then at the very bottom we can do export default Sidebar. Okay, so now in here, we will import Sidebar from './components/Sidebar', and now we have our Sidebar back. So now look at this. We've refactored a bunch of things out into separate files, and let's make sure this is still working. And as you can see, our application is still working just fine. All right, and so now we have successfully split our application into a bunch of smaller files. There are many tutorials on React and Redux including, of course, here on Tuts+ that I made a while ago where we built a wiki in React that begin in this way. At the very beginning you start by building your code in multiple files, and it's never actually in a single file in the way that we started here. Of course, I think separating your code according to its responsibility or classification or however you're comfortable doing it is a smart idea. It's gonna make growing your application much, much easier. However, I hope that with this project, by building our application in a single file as far as we could, it allowed you to focus on understanding exactly what React or Redux bring to the table. A lot of React and Redux applications are built in multiple files, but that doesn't mean they need to be. And that doesn't mean multiple files is a core feature of React or Redux. It can all be done in a single file, as we've just seen. However, as I hope you've also just seen, splitting your application into multiple files as we've just done will make it much easier as we go forward with our development.