Check out a free preview of the full Redux Fundamentals (feat. React) course

The "Setting initalState" Lesson is part of the full, Redux Fundamentals (feat. React) course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates binding the initalState to the reducer to allow an immediate starting value for action. A students question regarding what happens if there are multiple parties to keep track of in state is also covered in this segment.


Transcript from the "Setting initalState" Lesson

>> We saw that we have a few different methods here, we already explained reflates reducer. We've already taken a lucky guess I get state. How anyone wanted, yeah we're down to two methods less dispatch and subscribe. So if you wanted an easy 100 points, these are Super Mario Brothers points.

They don't actually get you anything but you can see how many points you can earn. That should have been our demo app now I think about it, but here we are. Anyway, we'll take a look between dispatch and subscribe. Which one is gonna get an action into my reducer?

>> Is it dispatch?
>> Dispatch, all right, 100 points. So with that, once we have our store in place, I can go ahead and I can cancel a store and then we'll say, store the dispatch and I can call that action creator. Increment that will return the object in there.

And then just to get take stored, I get state for a spin. We've got that in there as well. Can't read value undefined.
>> Maybe we need to pass the initial state.
>> Yep, this is why again, so we have two options to pass the initial state. So we can't find the value on undefined.

That's because the very first time around, we haven't returned anything out of here. We have two options for getting the initial state in there. The first option kind of the older option is just pass it in here. Right and now you can see my code works. This is the kind of the original way to do it.

And one of the reasons that the create store supports that is like that seems like a reasonable place to do it. But also default arguments weren't standard in the JavaScript spec yet when Redux first came out. So, there wasn't an easy way to also do. This will be if state ends up being undefined the first time we call it then it will set it to the initial state as well.

The reason that I like this syntax more is because as you start to split up your reducers all over the place, right? You can then have the initial state just being for that particular reducer when we see combined reducers that'll make a little bit more sense. But it allow you to okay you have each piece of initial state per slice the reducer.

I think I saw another hand.
>> I noticed if we have multiple properties in the state, but certainly we just have value what if we have more properties.
>> So, the answer like most things is it depends if they are all related, they can all be in the same reducer, right?

Let's say it's an array of tasks, right? Or it might be, are we loading, is there what's the data. That might belong in a reducer, generally speaking when we get to combine reducers we'll see it's better to split our reducers out to each little common piece. So we might take care if it's buying a phone number a Twilio, we might have one that just keeps track of the phone numbers that are currently loaded.

We might have another one that keeps track of the current user, right? Well, we do is we could put it all in one giant reducer and we could walk that state and try to manipulate it and we can see that I can get a little tricky, right? And this kinda goes into one of my recommendations about reducers.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now