‫Now it's time to create
‫that Redux store that we talked about in the beginning.
‫So now we will use an actual Redux feature
‫for the very first time.
‫So what we did here was simply writing an object
‫and a function.
‫So we didn't really use Redux yet, but now we need it.
‫And so now we need to install it.
‫So let's come to our terminal here
‫and then let's do N P M install
‫Redux.
‫So just like this, and so out of this Redux package
‫we will now take the create store method.
‫So in order to create that store.
‫So, let's import that here.
‫Create
‫store
‫from
‫Redux.
‫And so now you see that it has like,
‫this strike through here.
‫And the reason for that is
‫that the Redux team kind of declared
‫that this method is deprecated.
‫So as I mentioned earlier, there is now a more
‫modern way of writing Redux, which is Redux Toolkit.
‫However, I still believe that it is really way
‫better to first learn Redux in this way.
‫So in the way that I'm showing you now.
‫And then once you have all the Redux knowledge,
‫to then transition into Redux Toolkit.
‫Because otherwise everything will
‫really just seem like magic.
‫It works just too easily,
‫and then you have no idea what is going on.
‫And so that's why they also tell us
‫down here
‫that-
‫well, where we start-
‫Uh, yeah.
‫So you should not be using the Redux core package
‫by itself except for learning purposes.
‫And so that is exactly what we are doing here.
‫So we're just learning how Redux works.
‫And so for this, this is more than enough, and don't worry
‫because this will never be removed from Redux
‫as it says right here.
‫Now, right?
‫But with that warning out of the way, let's now
‫actually create our store.
‫So all you have to do is to call the create store function
‫with the reducer.
‫So that's really it, at least for now.
‫And so then this will return the store.
‫And so let's just call it store.
‫So just like this.
‫And so now on this store, we can dispatch actions.
‫So for example, we can do store dot
‫dispatch
‫which is going to work in exactly the same way
‫as the dispatch function that we got
‫as a result of calling the use reducer hook.
‫So again, this dispatch function
‫is basically what we already know from use Reducer.
‫And so this is where we can now pass in that event.
‫So let's specify
‫account
‫deposit
‫and then a payload
‫of let's say 500.
‫All right?
‫But now how do we actually run this code?
‫So how can we execute this and then see the results?
‫Well, let's just open up or index dot JS file,
‫which is the file
‫that we already know will always be executed
‫at the very beginning.
‫So at first, let's just clean this up.
‫And now what we're gonna do, again
‫just for learning purposes,
‫is to simply import that entire
‫store dot JS file.
‫So just like this actually.
‫And so what this will do is to simply run the code
‫that is here in this file.
‫So we're not exporting anything
‫from here and not importing it here, but all we're doing is
‫to importing this file, which will then simply
‫run the code that is here in the top level of this file.
‫So if I console dot log, anything from here
‫it will then appear in our console.
‫So again, this is just a way
‫of executing, or test, or learning code here.
‫Okay?
‫And now as always, we should be able to run NPM start.
‫So let's wait for that.
‫And yes, agreeing to open in another port.
‫And then as always, this takes some time.
‫And here we go.
‫So this will be the application
‫that we're gonna be working on later.
‫So it's basically like the graphical user interface
‫to the account that we're modeling here.
‫But for now, I'm only interested here in the console.
‫So let's make this even bigger so we can really
‫see what's going on.
‫And so indeed, we got our console dot log coming from here,
‫but that's not really what we're interested in.
‫Instead, we want to know console dot log
‫store dot get
‫state.
‫Because that will then show us
‫the current state of our store.
‫And-
‫nice!
‫So our balance is already 500, which is because
‫we dispatched that action right here.
‫And so now we have Redux already working in this very
‫simple way.
‫So let's try another one.
‫Let's say account
‫withdraw,
‫and then 200.
‫And so then we need to log again
‫because what we log here is only
‫after that very first action.
‫And so now that went down from 500 to 300.
‫Now, we could also subscribe to the store
‫which would then automatically show us these updates here
‫on the screen.
‫But let's keep it simple.
‫Cause in the real application, we will later not need that.
‫So there's no need to learn an additional thing here.
‫But anyway, let's get maybe rid
‫of this one just to clean the code a little bit.
‫And so now I want to dispatch the action
‫of actually requesting a loan.
‫So request
‫or first account, request
‫loan.
‫And then remember how I said
‫that the payout here will actually a bit more complicated.
‫So that's why we left this part here for later.
‫So now for the very first time as a payload,
‫we will actually pass in another object.
‫So we haven't done that before,
‫but of course this is perfectly fine because with this
‫we can then pass in basically multiple pieces of data.
‫So let's say that we want an amount of a thousand Euros
‫and then the purpose
‫is
‫to buy a car.
‫And apparently a very cheap car.
‫But let's just roll with this example.
‫And so now here in this action, let's use that data.
‫So here the loan is account dot payload dot
‫amount,
‫and the purpose,
‫or actually I think it's called loan purpose,
‫is
‫action dot payload
‫dot
‫purpose.
‫Let's see.
‫Yeah.
‫And so let's see what our store looks
‫like after this operation.
‫And indeed, we get our loan, we get our purpose
‫but we also have to now add that loan to our balance.
‫Cause of course, after we get the loan,
‫then our balance goes up by that amount.
‫And so let's also set a new balance
‫which is gonna be the current balance.
‫So state dot balance
‫plus the action
‫dot payload dot
‫amount.
‫And there we go.
‫So that's correct.
‫And now finally, just to experiment
‫with this last one as well, let's then pay the loan back.
‫So just to see that this event here
‫actually has no payload at all.
‫So pay loan.
‫And so after that, we are basically back to before.
‫So the balance went down again
‫and here we are back to the beginning as well.
‫So this actually works great,
‫but let's add some more Redux conventions on top of this.
‫So remember how I mentioned
‫in the first lecture of this section, that usually in Redux
‫we don't always manually write the type like this,
‫but instead we create something called an action
‫creator to automate this process.
‫And so let's create those action creators in the next video.