Introduce Redux into your application and perform some initial setup to get ready to start building your views with Redux integrated. First, install the proper dependencies to use Redux, then create your store, next create some mock data, and finally add a reducer to tackle you data.
- [Instructor] In this video, we'll introduce redux into our application and get some initial setup to get ready to start building our views which redux integrated. I will do my best to give you enough details and the context of our app so you understand what we're doing. But keep in mind this is not a full overview of redux. So if you need a better understanding, watch Alex Banks' learning redux course. So let's get started. The first thing you want to do is npm install, and we'll install a few things. You want to make sure you save them as well. We want to install redux.
We want to install react-redux. And finally, we want to install redux-thunk. Not think, but thunk. These are all tools that we're going to use. Okay, perfect. Now you need to go into your editor, and we'll first do a few things. Let's create a folder called components, and this folder components, we'll drag and drop all of our files that are components. So the App, the Loader, the Login, and the PeopleList.
Next, you want to create a folder called actions. And all these terms are going to make sense as we use them, so don't worry if you don't understand what we're doing right now. So in the actions folder, we'll create a file, and we'll name it index.js. Don't do anything with this file for now. We'll add code to it later. Last but not the least, we'll create a folder called reducers. And in this folder, we'll do two things. The first, if you go into the exercise files, so let's go into the exercise files, go into chapter three.
You'll see a file called people.json. This is basically a file that I created with some data. So this is static data that we're going to use in our application until we connect the application to Firebase, and then start adding stuff live with the application. If you don't have access to the exercise files, feel free to create one. So let's go ahead and drag and drop that file into our crm. And you want to drag and drop it into the reducers folder.
So you do that by copy and paste or Option + click like so. Then we can close all this. And this is what it looks like. So you have an id, first_name, last_name, phone, email, company, project, and notes. This is all things that we're going to use in our views. Okay? Let's close that, and we'll create a file called PeopleReducer.js. And in this one, we'll import the data that we just dropped, and we'll call it people.
So import from people.json. Then we'll create a constant for our initial state. So, in redux, you need to declare an initial state. Whether it's empty, whether it has some data in it, you need to do that. So, in this particular object, we'll pass the people that we just imported. So again, this is ES6 Syntax, you could've done something like this, it would've done the same thing. Okay? And then we'll create our first reducer.
So this one won't do much, but at least it'll return our state as it is. So we do export default, and then we're passing a state. And we accept the initial state as the default if there's no state. So if there is a current state, it will use that state, otherwise it will load the constant that we just created. And then we do a function. And inside of the function, we'll do a switch statement. So when we start doing and adding more reducers into this particular file, you'll see more switch statements.
You'll see case for this, case for that. We'll pass an action, and then if the action type matches this, then do that with that particular object. So for now, we're passing the action.type, so we're just setting that up for later. And then inside of it, we'll do a default right away. And it returns the state. So what will happen here is we have the data that's being passed into the initial state. Then our first reducer accepts a state.
There is no state already, so just place the initial state inside of our state, and then there's no action on this one. So there is a default which will return the state. So at least we'll have the people data available in our application. Okay? Now we need to move on to the app. So we have a few things to set up in our app.js file in order to accept and use redux. The first thing we'll do, we'll import our provider, which we'll use in a few seconds, from react-redux like so.
Then we'll import our createStore from redux, and, last but not the least, we need to import our reducers. So we'll call them reducers from. So we get it from our reducers folder and our PeopleReducer. So a little note. This import may not make a lot of sense right now, but if you'd have a big application where you have multiple reducers, you would combine them in an index.js file, and then instead of doing a specific reducer load here, you would do reducers like so, and it would load all the reducers.
But it's not the case in this application, but in most cases you will do the reducers that way. Just a quick note. Okay, after that, we need to create a store. So we create a store from our createStore function, and pass the reducers inside of that store. Last but not the least, we need to wrap this view inside of our provider and pass to store.
So this way, we have the store ready when we load our components, and we can use it for our application. Okay? Let's put the view inside of it to make sure we add that here like so. This is not tabbed properly, let's clean that up a little bit. There you go. And inside of our provider, we're passing store which we just called store, like so.
Okay. Now that we have a great starting point, build our views while using redux, we need to debug. Because some of the code that we just added broke our application. So in the next video I'll introduce a great tool to do just that.
- Initializing React Native projects
- Projecting a folder structure
- Installing material kit and vector icons
- Coding a login form and a loader
- Setting up Firebase email auth
- Using the React Native debugger
- Creating a list view, a detailed view, and a menu
- Setting up Redux
- Coding the scroll on detail view
- Adding clickable buttons
- Setting up Firebase for the back end
- Creating the new add person form
- Completing functions