‫Let's now learn how to dispatch actions
‫to the Redux store from within React components.
‫So still within our customers feature,
‫let's now open up the CreateCustomers component.
‫So here, if you want to take a minute to analyze the code,
‫feel free to do that,
‫but this one is actually pretty simple.
‫So all it is these two input fields
‫which are already controlled elements
‫with these two useState hooks right here.
‫And so all we're gonna do
‫is to complete this handleClick function
‫which is called when the user clicks right here,
‫so here on CREATE NEW CUSTOMER.
‫So let's actually make this small again
‫and place them side by side.
‫And here actually we don't need all of this,
‫and even the window is bigger than it has to be.
‫All right.
‫But anyway, it is in this function
‫where we will want to dispatch now an action
‫that will create the new customer.
‫So how do we do that?
‫So before, when we wanted to dispatch an action,
‫we called the dispatch method on the Redux store.
‫Remember that?
‫However, that's not how we do it inside React.
‫Instead, we get access to the dispatch function
‫by using the useDispatch hook.
‫So useDispatch,
‫which is a custom hook that was provided to us
‫by the React Redux package once again.
‫Okay.
‫And so all this will do
‫is to return the dispatch function to us.
‫And so this dispatch function
‫then of course works in exactly the same way as before.
‫And so now we can use that right here,
‫so to dispatch an action in this event handler,
‫but what action should that be and how should we do that?
‫Well, this is where our action creators
‫come into play again.
‫So let's open up here our customerSlice.
‫And notice how here we again have the createCustomer
‫and the updateName action creator function?
‫And so all we have to do is to now import this one
‫into our component.
‫So probably if we start typing
‫createCustomer,
‫then React will automatically import that for us.
‫Well, actually it didn't,
‫but that's not a problem because that's easy enough anyway.
‫So here remember that is a named export,
‫and so we need these curly braces.
‫So createCustomer from customerSlice.
‫And so remember that all we need here
‫is the customer's name and the national ID.
‫And we already have these,
‫so they're already in our state,
‫and so we just pass them in here and the national ID.
‫And probably here, before we even dispatch,
‫we should check if the values actually exist.
‫So if there is no full name
‫or if there is no national ID, then just return,
‫so then just do nothing.
‫But otherwise, we dispatch the action
‫that will be created by this action creator.
‫So let's test that.
‫And first, if we click here, like this,
‫then nothing happens.
‫But now let's test that and click here,
‫and beautiful.
‫So that worked, nice!
‫So now my name got immediately here into the user interface,
‫and so what I mentioned before did indeed happen.
‫So here we are reading that value from the store.
‫And so as soon as that value updated in the store,
‫so basically in this global state,
‫then this component has re-rendered.
‫Now here we could now clean the input fields,
‫but instead let's actually hide the form
‫because once the customer has been created,
‫there's no need to display that form anymore.
‫So let's close this one,
‫let's close our slice,
‫and then this one we also no longer need.
‫And so let's come to App.js,
‫so where all these four components are included.
‫And so now again, if there is no customer,
‫then we only want to display this one,
‫and otherwise, these three.
‫So that means that we need, again,
‫to get the information,
‫so to get the current state from the store
‫in this component.
‫So that's easy enough, we already know how that works.
‫So we use useSelector,
‫which receives this callback function,
‫and then here we say state.customer.fullName.
‫So let's store this in,
‫well, let's call it fullName this time, give it a safe,
‫and now here we just need some conditional rendering.
‫So let's say if fullName is equal the empty string,
‫then we want to render CreateCustomer,
‫but otherwise we want to render these three.
‫So we need to create a new fragment, close this,
‫and I think that this should work now.
‫And yeah...
‫So actually that form is gone,
‫but let's try from the beginning.
‫So now only the new customer form is displayed
‫but not the name of the customer
‫and the balance and the operations.
‫Yeah, beautiful.
‫So our application is (chuckles)
‫well, almost looking like a real bank application.
‫Well, not really,
‫but that's not the point in this application right here.
‫We're only working how to work with React
‫and Redux together.
‫And now next up, to keep practicing how to dispatch actions,
‫let's also work on this form right here,
‫so on these account operations.
‫So that's right here.
‫And here we do have a lot more code already,
‫so basically the entire code of all these input fields here,
‫and all that is all in this one big component.
‫So in the real world,
‫we would probably split this into multiple,
‫but here, as always, I wanted to keep it very simple.
‫But you should maybe now pause the video here
‫and, for like five minutes,
‫take a look at this code here and how it works.
‫So basically exactly what we're doing here now, okay?
‫But anyway, what this does
‫is basically to implement a graphical interface
‫for all the operations that we can do with the account.
‫So we can deposit, we can withdraw, request a loan,
‫and then pay it back, right?
‫So, for example, let's say we want to deposit 500.
‫Add that, then actually it's reflected here in this button.
‫So see how that is the same there?
‫And then once I click here,
‫of course I want to deposit this value,
‫and so that should then show up right here in the balance.
‫So this component here
‫shows us the current balance in our account.
‫So we already have the four event handler functions,
‫which is where we are going to dispatch our actions.
‫So each of them is linked to each of these four buttons.
‫So let's start with the first one.
‫And the first thing that we need to do
‫is to get access to our dispatch function.
‫And so, again, for that we use the useDispatch hook
‫and store the resulting function into the dispatch variable
‫which, of course, we could name anything that we want,
‫but this is the name that we are already used to.
‫So first of all, if there is no deposit amount,
‫then nothing should happen.
‫So just a normal guard clause right here.
‫And so now it is time to dispatch our action.
‫And once again, our action is going to come
‫from the action creator.
‫So in this case that is called deposit,
‫so coming from the accountSlice,
‫so this one right here.
‫And so all this one needs is the amount
‫and then it will automatically return
‫this object right here,
‫which is then gonna be dispatched into our store.
‫And so then the reducer receives that,
‫updates the store and then re-renders our components,
‫so just like we already know.
‫So here what we want to deposit is the deposit amount.
‫All right?
‫And then in the end, let's set the deposit amount
‫back to the initial state.
‫Now, we cannot really test this yet
‫because this balance component is not implemented yet,
‫and so we cannot see then the results of depositing,
‫but we will actually need the account state
‫here in this component as well,
‫so to display right here at the current loan.
‫And so let's then also import,
‫so let's read basically from the store
‫the current balance.
‫So actually let's get the entire account,
‫and then we use, again, useSelector.
‫So import that from React Redux,
‫and then, with the entire state,
‫we want to read state.account.
‫And we could also get access, of course,
‫to the entire state object.
‫So all we have to do would be to leave this like this.
‫All right?
‫And then here for now, let's just log the account
‫to the console.
‫So here it is,
‫and it is at zero right now.
‫But now if we deposit 100,
‫then that worked.
‫So our balance is now 100,
‫so we successfully dispatched our deposit action
‫to our reducer.
‫So everything worked in exactly the same
‫that I just explained earlier.
‫And so now all we have to do
‫is to basically repeat the same thing here three times.
‫And so if you want, you can pause the video right now here
‫and do that as a challenge.
‫So did you do that?
‫And if not, that's no problem at all.
‫But here, it's basically exactly the same as before.
‫So if there is no withdrawal amount, then just return.
‫And otherwise, we want to dispatch the withdraw function
‫which, again, comes from our accountSlice.
‫And by the way, here is also this currency field
‫which we're going to use a little bit later.
‫So that's why I haven't talked about that one yet.
‫So here we use the withdrawal amount
‫and then set withdrawal amount back to empty.
‫So we are at 100 now, so let's withdraw 50.
‫And nice!
‫So it got reduced to 100 minus 50,
‫which is, again, 50.
‫All right, next up we have the loan,
‫which is slightly more complex.
‫So for this one, we then need the loan amount
‫and the loan purpose,
‫which are the two arguments, I think, at least,
‫that the request loan function requires.
‫So first, let's check if they exist.
‫Loan amount or no loan purpose, then just return,
‫but otherwise dispatch requestLoan with these two.
‫And actually, VS Code is smart enough to understand,
‫so to read this function from the other file
‫and tell us that we need the amount and the purpose.
‫So that's very helpful,
‫and that's because actually behind the scenes,
‫VS Code is running TypeScript,
‫so analyzing all our file structure with TypeScript.
‫And finally, of course, also the loan purpose.
‫And then in the end, let's set them both back to empty.
‫All right, time to test this.
‫Let's say we want 1,000,
‫and here, buy a car.
‫So let's clean this, request the loan,
‫and yeah, it works, again.
‫And now here we want to actually display that loan.
‫So that's why I said earlier
‫that we actually need to read
‫the account data from the state.
‫So here actually, by convention
‫this should be called store not state.
‫And so here actually let's now de-structure the account.
‫So instead of having multiple selectors,
‫we will just select the account and then de-structure.
‫So we get the loan and let's recall that
‫to current loan, so...
‫Not recall, but rename.
‫And we get the loan purpose,
‫which here we really need to rename
‫because the state variable has that same name.
‫Okay.
‫And we also want the balance
‫so that we can display that down here.
‫Okay.
‫And...
‫Yeah, so right here is where we want to display that loan.
‫So that's the currentLoan.
‫And then inside parenthesis,
‫let's place the currentLoanPurpose.
‫And so then we get our $1,000 to buy a car.
‫So we still have our loan,
‫and so now all we have to do is to pay that back.
‫So here, it's the simplest one,
‫it's just pay loan without any arguments.
‫And then as we click, all of this goes away
‫and our balance goes back to 50.
‫And all of this here should actually only be visible
‫if there is a loan in the first place,
‫so currentLoan greater than zero.
‫And so now that disappeared.
‫So if we ask for a loan again,
‫then that appears and we can pay the loan back.
‫Nice!
‫So great work so far,
‫and I hope you are really getting the hang of it,
‫so working with Redux together with React.
‫So it's a bit of a different mindset,
‫but again, if you already know useReducer,
‫then this shouldn't be too bad.
‫But anyway, the only piece that is still missing here
‫is now this balance,
‫but let's leave that of course for the next video
‫as this one is already running pretty long.