This course has been updated! We now recommend you take the Complete Intro to React, v7 course.

Check out a free preview of the full Complete Intro to React, v2 (feat. Router v4 and Redux) course:
The "Stores" Lesson is part of the full, Complete Intro to React, v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Next, Brian creates the store for the application. The createStore method in Redux is passed the rootReducer to create the store. All application state will reside in this store object.

Get Unlimited Access Now

Transcript from the "Stores" Lesson

>> Brian Holt: Let's go create another file called store.js.
>> Brian Holt: Okay? And here we're gonna say, import { createStore } from 'redux'.
>> Brian Holt: And import rootReducer from, from './reducers'
>> Brian Holt: Okay. Then we're gonna say, const store = createStore(rootReducer). And then, export default store.
>> Brian Holt: And that is the most basic store, right.

[00:00:53] That's all you need to create a store.
>> Speaker 2: All right, question about sort of the shape of this thing. It might be easier to take a look in the chat if you have it. Dan is asking about the structure where you do the const, object, create store, and then do the export default store, versus putting the export default up where you're actually defining it.

[00:01:17] So essentially, instead of having two lines.
>> Brian Holt: Mm-hm.
>> Speaker 2: Or two parts where you export default afterwards.
>> Speaker 2: You replace the const store [CROSSTALK].
>> Brian Holt: Yeah, gotcha.
>> Speaker 2: With the export default.
>> Brian Holt: I mean, you totally could, that's just preference on how you want it to look.
>> Brian Holt: It's just saying specifically in reducers we could just say, essentially just say, export default, up here, right?

>> Brian Holt: Ex brought. Right? And get rid of this.
>> Speaker 2: I do that all the time too.
>> Brian Holt: It depends. Yeah, no I just I prefer-
>> Speaker 2: But I don't know if you have an opinion of no opinion.
>> Brian Holt: I don't know I'm gonna go with no opinion. If I come across a code base where someone does that, it doesn't bother me at all.

[00:02:10] This is just the way that I do it. I like having, I mean, I don't know if I like. I'm just accustomed to writing it this way.
>> Speaker 3: In that case, near the file, you'd just import reducers cuz there would be no reducer method import?
>> Brian Holt: So, what you would do here with the [CROSSTALK] curly parentheses.

>> Speaker 3: It stored it.
>> Brian Holt: So, this would work the same way. These two things would be the same. So.
>> Speaker 3: And then, over in store where you were.
>> Brian Holt: Yeah, you wouldn't change anything in store
>> Speaker 3: Bringing in, you'd still import rootReducer?
>> Brian Holt: Yep. So that's it, I see the point you're making.

[00:02:52] This doesn't have to actually match whatever comes from reducers, this can be called blah, right, and this would just be called blah, right? It's not a named export is what I'm getting at. So, you can actually export it as a named export, which is exactly what create store is, right?

[00:03:08] It says, export not default, it says export CreateStore, and that how you gonna handle it, cuz you know it's called createStore. That make sense? Yeah. But even this, you can say export createStore as blah2, right? And now, it's not called createStore, it's called blah2. But that's all ES6 module stuff.

>> Brian Holt: Does that answer your question?
>> Speaker 3: Yes.
>> Brian Holt: Cool. Okay.
>> Brian Holt: So now, we have the hello world of store, right. And actually store it. The creation of store doesn't usually end up being much more difficult than this. The only thing that will eventually add back in here is you can have read X middlewares.

[00:03:53] Which I will explain when, we're gonna use one later, but for now it sufficed to say this is enough to get the basics of a store. Any questions?
>> Brian Holt: Okay, so I've shown you how to create stores and it's probably not a far leap to figure out how to read from stores, right?

[00:04:21] But I have not, necessarily, talked about how to modify the store yet, or at least how how to get there. Okay. Or at least how to do it from the user-interface. So, what the interface is gonna do is the interface is going to dispatch an action. It's gonna say, hey, redux, this happened, here's the data that go along with it, you deal with it, right.

[00:04:44] So, you're gonna have action creators, which are going to dispatch actions, which are then going to be passed into the rootReducer, which is then going to be dispatch to reducer, which is going to change the state, which is gonna go back into the store. And then the store informs, React says, okay, here is a new state and then you get a new nice interface.

>> Brian Holt: So, it's a very tight loop, right? It happens, right? And it's very easy to follow because it always follows the same pattern, but as you might have noticed, instead of calling setState, which was one step, we now have seven steps to modifying State. So, complexity. We've added a bunch of complexity, and so you have to ask yourself, is this complexity worth it to me and to my app?

[00:05:30] Okay. So, we're going to go do each one of those steps now, and it's a bit tedious, I admit. But, It's predictable, and I value predictability over how tedious it is to write.