This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Adding Actions and the Provider" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott Moss: Now we're actually going to go ahead and make those actions. So what we'll do is, we'll make a new file here. Actually, the actions are pretty simple. So we'll just make those actions in line, those are actually pretty simple. Let's head over to todo.js. And here we have our todo lists, just like we had yesterday.
[00:00:22] So we're going to have to change a lot of this stuff around, so I think the first thing we want to do is, let's grab this part right here. So the input and the button. Let's take that out. And we'll make this another component, right? So I'm just going to cut that out.
[00:00:39] That's literally just the view that's encapsulating the text input in a button. I'm gonna take it out. I'm gonna make a new component. And we'll call it TodoForm.js. And I'm just gonna export const TodoForm. And I'm just going to make it a stateless React component, which is just a function.
[00:01:06] And here's the ES6 trick, if you just use parentheses like this, it's an implicit return. So I don't have to type the return keyword. It's implied that I want to return if I use parentheses. It's the same thing as doing the brackets and then typing return. So I'm just gonna do that because I'm returning one element or one root.
[00:01:23] So the thing I want to return is just this view right here.
>> Scott Moss: So I just gotta make sure I import those. View and TouchableOpacity. What else do we have? Text and TextInput. Let's break those onto multiple lines.
>> Scott Moss: And we also need to import react at the top, although we're not using it.
[00:02:01] There we go. Yes?
>> Speaker 2: Question. Could you explain the action.payload again?
>> Scott Moss: Action.payload is going to make more sense when we use it right now. But basically, action.payload is when we dispatch an action to Redux, the payload is the data that we wanted to give the action. So in our example, the payload is gonna be the new todo that we create.
[00:02:22] The payload is whatever data you want to transform with the state. Whatever you need to make a new state, that's what you send on the payload. So in our case, the only transformations of the state that we did in our reducer was literally adding a new todo. So the payload is, in this case, is only going to be the new todo.
[00:02:38] We just made it a standard to always call it payload. So inside of all the reducers that we make, we can just guarantee that the thing, the state that's being passed in is going to be on the payload property so we're not fishing for it, like where is this at?
[00:02:50]
>> Speaker 2: Follow up on that. Is this a function that will be called on a state?
>> Scott Moss: Is this a function that will be called on a state? Not sure what that means, but this function, these reducers here are going to be called by Redux, whenever we fire an action.
[00:03:06] So whenever we dispatch an action, Redux is gonna go through all these reducers to determine what the new state is. These reducers are literally being reduced. If you use the reduce method on arrays, it's the same thing. It's just gonna reduce our state down into a new state.
[00:03:21] This is how Redux determines what the next state is. Given the old state, and given the new actions, here's the new state. And that is re-renders all the other components in our application.
>> Speaker 2: Another question.
>> Scott Moss: Yes?
>> Speaker 2: Why is the import React from React necessary if it's not used in todoForm.js?
[00:03:42]
>> Scott Moss: So we're not using it, but these components are. And the React is not a global, so we have to import it. Yes?
>> Speaker 3: Isn't it because JSX to use React?
>> Scott Moss: Exactly, yeah. So JSX is gonna be using it. These are actually just function calls right here, which needs React, and React is not global.
[00:03:59] So we have to import at the top or it will freak out.
>> Speaker 4: In the todo form.
>> Scott Moss: Yes?
>> Speaker 2: Why isn't there a render in there?
>> Scott Moss: Exactly, so there isn't a render here because, let's go back to todo.js. Todo.js is a class that extends component, right?
[00:04:18] So, it's a JavaScript class, and there's methods on here, and one of the methods is render, right? And the reason you would make it like this, the reason you make a component this way, is if you need it state, and if you need it methods. So you would make a class.
[00:04:30] But todoForm, we're actually not going to use any state. We're probably not gonna use any methods. And all we really need is just a view. So React came up with a super short way to just create a stateless component by just returning it. So that's why we don't need to render.
[00:04:44] So if you have a function that just returns a view, it will just create that view for you. So we may or may not need to keep track of state. If we do, we'll just convert this to a class. But for now we're gonna keep it like this.
[00:04:57] Cool, so we got that. The next thing I'm gonna do, I'm just gonna make sure our styles are good. So I'm just gonna, what styles are here? Input new todo and button. So, no, input form and button, and button text, okay. So we'll take that. We'll say form input button, and button text.
[00:05:20] So we'll grab that, and we'll head back over here. Get the style sheet, and we'll make a new style sheet.
>> Scott Moss: There we go. So our styles should be good to go. All that's good to go. And now all we have to do is when we come back here, we could just import that back in, up at the top.
[00:05:45] So we'll just import,
>> Scott Moss: Our TodoForm from TodoForm. So now we have that component. And we're gonna put it exactly where it was before, right here. TodoForm. And we're just gonna self close it. There we go. Okay, so it's going to throw some errors because it's still using like some state and stuff, but we'll come back and fix that when we get there.
[00:06:19] So that's the first step. We created a new component. Now what we need to do is, now that we have our TodoForm inside of our Todo component. We need to wrap our Todo component in what's called a provider. That way we pretty much just need to connect the root of our application, which in this case is the Todo component, to Redux.
[00:06:38] And the way we do that is we use the connect method in Redux or React Redux. So we'll say import connect from react redux. Again, so we need to connect the root of our component to redux. So if we if we do connect here, this is going to allow us to get.
[00:07:01] Actually no, we're not going to do this here. We need to do it on TodoForm. Actually what we're gonna do here is we're gonna use provide. So instead of connect in here, what we're actually gonna do is, if we head over to, in this case I'm using Android, so I'll go over to index.Android.
[00:07:17] What we need to do is we have this one component here that's literally just returned a Todo, which is the root of our application. We need to wrap this in a provide. So we'll say import provide, which is a component, from react redux. And we actually don't need this.
[00:07:36] This is just a utility component, so we don't have to pass. If you don't use this provide component in order to access the state or the store in our components, we have to use a hidden feature in react that's not documented called context. And it's really hard to work with.
[00:07:50] So this keeps you from having to do that. So you don't have to figure out what that is. So all we have to do now is just wrap this Todo in provide.
>> Scott Moss: And then the reason they call it provide is because, what's happening here is we're gonna provide the Todo component with a store.
[00:08:12] So we already created a store. So we'll say store equals, and then we'll go ahead and import the store that we made, which was store from store. So we pass in our store here. So this is saying, I wanna provide this store to this application, or this component here.
[00:08:31] So now every child component of Todo is gonna have access to this store. That's what's happening here. Yes?
>> Speaker 2: Someone's questioning here, I think your syntax, is it provider or provide?
>> Scott Moss: Yeah, thank you, it's provider. I'm thinking of angular. Sorry, there we go, provider. There we go.
[00:08:52] So now we have this provider. What did I call it? Store export const store. All right, it's just freaking out. It's cuz it's inside a source app, that's why. Source app, there we go. Okay, thank you.
>> Scott Moss: Great. Yeah, so that's still gonna break. Cool, so now we have our provider.
[00:09:21] We have our store. The next thing we need to do, if we head over to back to the TodoForm, here's where we can actually like pass some stuff in, and we can do some stuff. So now it's freaking out because we're still using this.state and all this stuff here.
[00:09:35] So instead of using this.state we're just going to use props. So we're gonna say props, and we're gonna say props.newTodo. So when you make a stateless function, you get access to the properties that come into your component. So let's just say we'll have a property called new Todo.
[00:09:49] And we'll just bind to that. And also, we have these methods here that says like handle change. We don't have a handle change here. We also don't have a handle press. So we'll just go ahead and say those are gonna be other props, too. So props.handle change. And we don't need to bind any more.
[00:10:12]
>> Scott Moss: There we go. So it's still going to be doing the same thing. We just need to actually pass in these three props. We need to pass in a new Todo. We need to pass in a handle change, and we also need to pass in handle press. So what we can do is we can come over back up to this Todo here.
[00:10:30] We already have those methods, handle press handle change. So what we can do is we can come in here and we can just say, TodoForm, there you go. So your handle press is going to be this.handlePress.bind this. And handleChange is gonna be the same thing. This.handleChange.bind this. And then what we can do for the value is we'll just have to make a new value.
[00:11:05] So it's already a new Todo, so we'll say, value is this., what did we call it? New Todo? Yeah, let's just call it value to keep it the same. Props.value. So then we'll come here and say this.state.newTodo. There we go. So now it's literally the same thing. We just passed in the props and stuff.
[00:11:38] Let's refresh this.
>> Scott Moss: There we go. So it's still there. Exactly the same thing. And if we type, it still works. See how we converted that over? That had absolutely nothing to do with Redux, but I just wanted to convert that over. Because now we're about to convert over the Todo list, which does use Redux.
[00:11:57] So when we start using props you'll kind of understand why we did this. Does this makes sense? Why we did this like this? So now we have this component. Now we can use this form in other places as well, and it's not tied down to just Todos. It's literally just the input and a button, and it doesn't know anything else other than the props that you pass to it.
[00:12:14] What to happen when we change the input? What value the input is? And what to happen when we press the button? That’s it.