Wiring Redux to a React App Solution

[00:00:00]
>> Steve Kinney: Great, so let's give it a shot. We'll start with a card-reducer. At this point we will import the cards, let me to structure that, import the cards as defaultCards. And again, you might do a thing where you hit an API, that's obviously what we do but, just to keep us focused, we're gonna talk about APIs in a little bit.

[00:00:27]
From the normalized-state.
>> Steve Kinney: Write the cardsReducer. And I'll start out with some cards, again, that is the same as the state when we were doing it earlier. I'll make it defaultCards where it starts out as, and we'll get that action, so when something happens, we should be able to modify these cards.

[00:00:47]
For now, we're just going to return back the cards. So all actions that flow through will just kinda flow through this reducer and not modify them, that's obviously not the end result, but it's good enough for right now.
>> Steve Kinney: Cool, when I'm getting these files, is not a redux, there's no rules.

[00:01:07]
Your team, you should have a rule that you agree upon, and not name them different things, but with the layout, there's a bunch of different philosophies on how you layout, like what file you put the actions in versus the reducers. There's a pattern called ducks, where you try to put it all into one file.

[00:01:22]
Honestly, it doesn't matter as long as you have a plan. In my experience, I hate them all equally, and I tend to take a different approach on every app, as long as you're consistent in the application you're working on. So this is not necessarily a mandate how I'm laying it out, and you might drop into it outwards, lay it out differently, totally fine.

[00:01:43]
So we've got that in place, now what we need to do is, we need to drop it into that index.js in the redurecs, and we'll be able to just combine it in there. So we'll have, there's only one reducer, technically, but it's the combination of, I guess what you would call a bunch of sub reducers, which is the literal first time I've ever used that term, so you're welcome.

[00:02:06]
It's a Frontend Masters first. So once we have this in place, we should be able to take a look at our state, let's see.
>> Steve Kinney: We've got the cards, we've got the lists.
>> Steve Kinney: But I don't see them just yet, we'll figure that out momentarily.
>> Steve Kinney: We've got both of them in place.

[00:02:46]
>> Steve Kinney: Okay, I'm just gonna console.log this to see what happens.
>> Steve Kinney: Looks like we've got a little bit of an issue, we've gotta fix with the individual lists as well, but I don't see that card, and I will find it in a second. Let's go fix that issue with the list.

[00:03:15]
>> Steve Kinney: It does need that key, luckily we only have the listId, so that's a perfect key.
>> Steve Kinney: All right, let's go swap out the card for the card container, I think that might be our issue. So create a CardContainer component, and that is gonna pull and connect.
>> Steve Kinney: From react-redux, it's gonna pull in that card component

[00:03:52]
>> Steve Kinney: Great, and now we just, again, before we had the lists on the 3, now we need to get the cards off the three. And we'll figure out.
>> Steve Kinney: How that works. So, make a const mapStateToProps, we'll take some state, now, this is also, there's no cards plural in this case, cuz the list actually has all the cards.

[00:04:21]
So we're gonna need the ownProps here, cuz we're gonna figure out, what card do you want? And so, when we do that, we'll do return this new card prop, that is going to be the state.cards.entities(ownProps.cardId), we'll have to do a little bit of refactoring in a second, but we'll do that momentarily.

[00:04:50]
And we'll export default, we'll connect that mapStateToProps function to the card component.
>> Steve Kinney: Now in the individual list. Now we can swap it out. Card container will get rid of the card. And so, you notice that I have these, an individual card, and then I have the cardContainer, I could theoretically define them both in the same file.

[00:05:19]
I could, in the second function to connect, write the entire component there as well. Why don't I do this? Because there's a chance that, especially for testing purposes, that I might want to just have the component where I can pass in props and mark some stuff, without having to wrap it in an entire Redux store for my test.

[00:05:39]
Or I might wanna have components that are reusable across different connections to Redux. We have a component library where we have components that are used in multiple places throughout the products, but keeping them separate gives you a little bit more flexibility, even if you don't always need that flexibility.

[00:05:57]
So we'll pass in, the cardId, which will be this cardId as well. Cuz list.cards, after we normalize our state, went from an array of card objects to just an array of IDs, and they're kept separately, so we're pulling them off the state differently. All right, so let's go ahead and let's see what we get.

[00:06:22]
That's what I expected. We have to just go and.
>> Steve Kinney: The reducer. My suspicion was, hey, why isn't it on there? I'm like, that file must not be getting called yet, and when it got called, it broke. So, that's actually, again, not having an error sometimes it's problematic.

[00:06:45]
Once you have an error, it's easy to solve which is, I needed to go up a level in the directory
>> Steve Kinney: Normalize state, so turning it off and turning it back on worked [LAUGH], so I don't have a really great story there.
>> Steve Kinney: All right, so my error is like, I basically needed to reset the server.

[00:07:13]
At one point I had moved some files around, which could have been it, but unfortunately turning it off and turning it back on solved the issue, or fortunately depends on how you think about it. For us, at least made it an easy fix. All right, great.