This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Creating the Store" Lesson
[00:00:00]
>> Brian Holt: The first term that you need to know is the store, right? The store is the central repository of the data. It's kind of the state, right? It's the store. So go ahead and make a new file here.
>> Brian Holt: Save it. Call it store-js. Notice I am calling it lower case s.
[00:00:19] It's because it's not a component, it's just the data store.
>> Brian Holt: Now, the store can be pretty simple up front, but I'm gonna just, we're gonna write the entire store all at once. So we're gonna introduce also things called thunks, which I'll talk about here in a second.
[00:00:35] But let's just go ahead and throw all this here. React createStore. This is the method that you actually use to create a store. Compose and applyMiddleware from redux.
>> Brian Holt: Yeah, sorry, we have to go install those two, don't we? Let's go install them first.
>> Brian Holt: So I'm going to say mpm install redux, redux-thunk and react-redux.
[00:01:11]
>> Brian Holt: Okay, install those.
>> Brian Holt: Redux is the core library. Redux-thunk is going to allow us to asynchronous actions with redux.
>> Brian Holt: And react-redux is a pretty small connecting layer between react and redux. You could write react-redux yourself, it's not very complicated. I think it adds about a kilobyte at most.
[00:01:40] But it's convenient. It's nice to not have to write it. So just go ahead and use react-redux.
>> Brian Holt: Okay?
>> Brian Holt: We have to start our dev, so we can npm run dev. Okay, we're going to import thunk. Which is my favorite word in the world. From redux-thunk. Again, I'll explain that when we get there.
[00:02:09] And import reducer from ./reducers.
>> Brian Holt: Now, making a redux store is as simple as saying const
>> Brian Holt: store equals createStore.
>> Brian Holt: With your root reducer, and saying export default store. It is this simple. However, we wanna add some additional abilities to redux, to be able to do asynchronous things.
[00:02:48] We need to do Ajax calls, for example, right? So in order to have any sort of asynchronous action, you have to augment the ability of redux. So we're gonna have to add a few more things here.
>> Brian Holt: So we're gonna use the compose function here, which allows us to add multiple things at once.
[00:03:08] We're going to do applyMiddleware(thunk).
>> Brian Holt: This adds the ability to do asynchronous actions with redux. And we're gonna do another one which, I just literally took this off of the docs, so that's why it looks ridiculous. typeof window triple equals object. Sorry, string object.
>> Brian Holt: And type of window.devToolsExtension is not undefined.
[00:03:52]
>> Brian Holt: And if so, then do window.devToolsExtension.
>> Brian Holt: Otherwise, give it an identity function. Okay.
>> Brian Holt: Type of window right there, okay.
>> Brian Holt: This is an f. It might be hard to tell, but that is an f. So what is this madness right here? Again, I just copied this off directly from the redux documentation.
[00:04:34] We have a thing called Redux DevTools, and this little blurb right here makes sure that you don't crash your app. So if you have the Redux DevTools extension installed, then it instantiates it, right here. Otherwise, it gives it a function that doesn't crash Redux, which is what that does.
[00:04:54]
>> Brian Holt: What I'm trying to say is you don't actually really need to care about this. This is the last you'll see of it. You never have to care about it again. This just starts the dev tools. Unlike react dev tools, which just work out of the box by inserting itself into react, you have to kind of go from the inside out with the redux dev tools.