React Native (feat. Redux) Stepping through the Redux Callstack

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott Moss: So let me refresh this and we'll run through this and then I'll go through the debugger and show you. I'll put the breakpoint into the debugger where Redux is firing this stuff so we can see what's happening. So this is, yes?
>> Speaker 2: There's a question that got asked in the channel and answered in the channel, do you wanna look at it anyway or?

[00:00:19]
>> Scott Moss: What was the question?
>> Speaker 2: It's the one, Jessie, is that the new props todos get updated with the component is rendered, correct?
>> Scott Moss: Yes, yes they do. Or actually, it's the other way around. The component gets rendered when the props newTodo is updated.
>> Scott Moss: Redux is gonna update the props with the provider and then that's when the renderer is called again because the props are updated, yeah.

[00:00:42] So, this is freaking out because, like, there's no there's no such thing as a map on this undefined object thing. So, we need to set a default prop. So, what we can do is we can come up here and I don't know what level of Babel I have on here.

[00:01:00] Let's just see if it has static properties or not. So we need to set up default state. Let me see if it has this static state defaultState, or defaultProps, I'm sorry. And we just say the defaultProps of todos is an empty array. That's why it's breaking right now.

[00:01:14] Cuz the props haven't come in yet so it's just like, what? Okay, looks like that satisfied it, let's see. Okay, yeah, so sweet. I didn't know React Native was using stage-0 Babel, that's awesome. So this static property is just saying _Todo.defaultProps.todos is an empty array. So initialize the property of todos as an empty array, that's all that's doing.

[00:01:40] And static properties is a ES7 thing, which is pretty legit. It's the same thing as saying _Todo.defaultProps, it's the same thing. It's just a static property. All right, cool, so now let's actually do some todos. So if we come in here and we type clean up, we hit make.

[00:02:00] That didn't show up so let's actually run through this and let's see what happened here. So what we'll do is enable the debugger and I think this is where it all starts coming together, where you can see what Redux is doing. So we'll come in here and we'll just set up some breakpoints on a different parts of Redux so we can see what's happening here.

[00:02:24] So we'll come in here and inside of source app, we'll go into todo. And what we wanna do is, I'll set a breakpoint on,
>> Scott Moss: handlePress.
>> Scott Moss: So we'll set a breakpoint here. And then, we'll head down to our method where we're actually calling the dispatch. We'll set a breakpoint there.

[00:02:45] Then, we'll go into our reducer and we'll set a breakpoint here. And, yeah, that should be good. So then we'll refresh and we'll walk through all this stuff. So let's see what happens. In the web, they'll be a logger that you can use a Redux that makes this so simple, so easy.

[00:03:03] So let's type, clean up, hit make. It looks like it caught the debugger, and boom. So the debugger caught right here on handlePress, and now it's about to call this.props.createTodo, which is indeed a method. So that binding from connect totally worked. Yes?
>> Speaker 2: Question from Charles. Is that the same as get defaultProps?

[00:03:25] I think, referring back.
>> Scott Moss: What's he talking about? Yeah, is this the same as get defaultProps? Yes, this is the ES6 ES7 way of doing get defaultProps. Yeah, so if you were doing a react.createClass, yeah, and you did get defaultProps, yes, this is the equivalent of that for using ES6.

[00:03:45] Sweet, so we stopped right here on handlePress, we're passing it this.state.newTodo, which is clean up. All right, so now we expect it to stop here. So, let's check that out, we hit Play. It does indeed stop here and it dispatches this action caught with a type of CREATE_TODO and the payload of todo.

[00:04:07] So now if we hit Play, we expect it to actually go into our reducer. And it does. So now Redux ran that action, if you look at the action object right here, let's go look.
>> Scott Moss: There's our payload that we just passed in. There's our type. And because we hit a switch statement on that same type, Redux is going to run this action.payload and it's going to pass in the payload here and then the state.

[00:04:38] So we hit Play, there we go, everything runs. Now why that's not rendering, I'm guessing I made a typo down here somewhere. Let's see this.props.todo.map. It's because, wait, no, that's not right. Let's see why that didn't render.
>> Scott Moss: state.todos.
>> Speaker 3: You didn't pass in map state-
>> Scott Moss: There we go, yeah, definitely a typo.

[00:05:09] So we need to pass this in first mapStateToProps as the first argument, instead of the null. That makes sense. [LAUGH] So now if we refresh this.
>> Scott Moss: And we'll run through the debugger again just to make sure. So let's say clean up, then make, and we'll just run through one more time.

[00:05:34] Again, handlePress is going to create the Todo with the newTodo clean up. It's then gonna call that method that we just said, that we mapped the actions to, with the same payload of clean up and the action of CREATE_TODO. Which then, hits this reducer and creates an entirely new state for the todos property on our store.

[00:05:57] And that should rerender it right here. The reason that rerendered [LAUGH].
>> Speaker 2: [LAUGH]
>> Scott Moss: The reason that rerendered is because we're binding to this.props.todos. Which is our state.todos, which just got updated here in our reducer because we fired this action with the given payload. Everybody following me there?

[00:06:28] Does it still seem kind of crazy? Okay, it is still kind of crazy, I know [LAUGH] but, yes?
>> Speaker 5: So whatever todos returns right here will-
>> Scott Moss: Be the new state.
>> Speaker 5: Will be state.todos.
>> Scott Moss: Yep.
>> Speaker 5: And whatever user returns will be state.user.
>> Scott Moss: Yep, and that's because this.

[00:06:50] But I could call this anything I want. Like if I would have said this is called data and I'm gonna set that to the todos property, now it's state.data, but it's still gonna go to the todos reducer. Yeah, it's whatever property you put right here. And not so much the name of the reducer, it just so happens that I'm following a pattern where the name of the reducer is the name of the state as well, to keep it simple.

[00:07:12] So, yeah, so whatever I return right here. Like if I always just return, like this for instance, if I always just return an array with the word hello in it, that's always gonna be the state. It's still gonna run the reducer, but this is always gonna be the state, it doesn't matter what.

[00:07:30]
>> Speaker 5: So you can, or a single action can modify a different state, it could like modify user and it can modify-
>> Scott Moss: Yeah, exactly, so I could come up to user and then I can write a case for CREATE_TODO inside of user and it'll like do something in here.

[00:07:44] So a good pattern for that is, I would have like, for instance, let's say we got the todos from the server, so there might be errors. So inside of here, I would do all the things for when we actually get todos and add todos. But then, I'd make another reducer for errors that would check for action.errors and handle the errors and maybe display like a notification on the page.

[00:08:02] Something like that.
>> Scott Moss: So any other questions on this? I wanna walk through this again, does anybody need me to walk through this again from a different perspective?
>> Speaker 6: Can you show where the todos or, excuse me, todo component is,
>> Speaker 6: Called, I guess?
>> Scott Moss: Yeah, the todo component, if we head into the main that I just created, it's just right here.

[00:08:30]
>> Speaker 6: So where does it get the props?
>> Scott Moss: Right, because we're not passing props in here, right? So you're like, where is it getting the props? Exactly, so we're not passing in any props here. So if we go to the actual todo component. The only props that we're using on the todo component itself is the todos prop and the createTodo prop.

[00:08:52] Those are the only two props we're using, and we actually made those ourselves with these two methods here. These methods created those props for us. So when I said mapActionsToProps, I'm literally saying grab this action and merge it to the props. And the same thing with state, grab this state and merge it to this prop.

[00:09:09] And then by saying connect, I'm saying so I wanna get all these props that I just made and I wanna merge them with this component.
>> Speaker 6: Okay.
>> Scott Moss: That's what that's doing, it's just a fancy merge. It's just grabbing all of the stuff that we made here, and merging it to these props here.

[00:09:26] It's actually, this is what's called a higher order component. So what connect is doing is creating a new component for us. That's why I had to call this one _Todo and rename this to Todo, because it's gonna return a new component that's gonna wrap this component. Because in ES6, you can't do mix-ins anymore.

[00:09:42] Whereas, React without ES6, you can do these things called mix-ins. Which you can just do it super easily, but you can't do it with ES6 so you just use connect instead. Other approaches include making a decorator, so you can do something like, you can use connect as a decorator and you can do that.

[00:09:58] So that's other stuff, but it does the same thing.
>> Speaker 6: Okay, thanks.
>> Scott Moss: Yep, any other questions on this?
>> Scott Moss: I'm gonna push this up as an example so you can look at it. Cuz you're about to do this. Not for todo though, for book. Cool, all right, so if there's no more questions, I'm gonna push this up and it's gonna be on the same Todo library or same Todo thing that we had yesterday.

[00:10:26] So,
>> Scott Moss: It's gonna be on the Redux branch. There's already a Redux branch. How did, I didn't make that. Who made that? Let's say redux-solution. There we go. So there's gonna be like redux-solution branch.
>> Scott Moss: Sweet, all right, so you can check that out and use that as a reference.