Wiring State Store to the App

[00:00:00]
>> Steve Kinney: So let's look at the data structure that we use. This will involve a lot of the kinda more complicated things that we saw on the prequel, and make it so we can more easily modify it. So what we're gonna do is, let's get some of this kinda up and running, and wired up.

[00:00:15]
We're going to start by implementing the ability to get all of the lists, and the ability to kind of create a new one, right? And then I'll give you a chance to then implement the cards along the way, great. So we look at the kind of structure of our application, I've made some new folders in here.

[00:00:39]
We've got actions, we've got card-actions, list-actions, and user-actions. We've got containers, which we haven't made any of yet. And we've got these reducers, which is card-reducer, list-reducer, and user-reducer, and there's gonna be an index.js. index.js is we're gonna put our combined reducers, right, which we'll actually set up in Redux at this point.

[00:01:01]
So let's go ahead and let's start with the list-reducer.
>> Steve Kinney: All right, and then here, we're just going to do a very simple version of this. We'll import,
>> Steve Kinney: I believe that's up a level.
>> Steve Kinney: Cool.
>> Steve Kinney: And our list-reducer,
>> Steve Kinney: We'll actually call it, just to make it clear, we'll call it the defaultLists that we bring in.

[00:01:52]
And we'll call it lists inside the function,
>> Steve Kinney: Right, and right now we'll just console.log,
>> Steve Kinney: The lists and the action, and then we'll make sure we turn that list. In the previous example, I called this state, we're gonna call it lists at this point. Cuz that way, we know what we're working with, it's just a little bit more clearer.

[00:02:12]
But it's the same object, it was state previously, we know in the list-reducer that we're dealing with lists.
>> Steve Kinney: Cool, now we need to combine it, and you might be like, combine it with what? We're gonna add cards and users, but we're gonna combine it with just itself right now, it'll be a combined set of one.

[00:02:38]
So in here we'll do import,
>> Steve Kinney: combineReducers from 'redux'.
>> Steve Kinney: We'll import that list-reducer,
>> Steve Kinney: I'm just gonna call it lists.
>> Steve Kinney: And we'll then,
>> Steve Kinney: export default combineReducers with the lists. So this is gonna give us one store. Immediately, it's gonna have a key called lists, and that's gonna be all of our lists, right?

[00:03:20]
And so when we eventually add users and cards, and so we'll have a tree where there's a branch for lists, a branch for cards, a branch for users, we're good to go. So we've got that combined reducer, let's wire it up to a React application. So we'll go up into our index.js,

[00:03:45]
>> Steve Kinney: All right, right now, it doesn't know anything about Redux, so I'll import createStore,
>> Steve Kinney: From redux, we'll import that provider. We don't need to import connect, cuz we're gonna do that in the containers, so we're gonna make it separate files. Provider from 'react-redux', right, and we need to import our reducer.

[00:04:14]
I'm gonna call it the rootReducer cuz it's the combined list, cards, and users.
>> Steve Kinney: Right, so we've got the ability to create a store, the ability to pass it to React, we pulled in our reducer. That's about everything we need at this point. We'll do, as I'll say, const store,

[00:04:38]
>> Steve Kinney: Is based on this rootReducer, right, so now we don't really have to touch this again. As we add the cards and the users reducer, it's all gonna be combined for us. And finally, it's angry about this, pull that up.
>> Steve Kinney: Cool, and so we'll say Provider,
>> Steve Kinney: Put that around the application.

[00:05:06]
>> Steve Kinney: store is our store that we just made, great.