‫So let's now start learning Redux in isolation.
‫So without React first by writing a simple reducer function.
‫Now, even though we are going to start
‫with Redux in isolation, we are still going to start
‫by creating a new React application now
‫so that we have some place
‫where we can actually write our Redux code.
‫So let's again come to the terminal
‫and navigate to the folder that we're interested in here.
‫And then since we are still learning
‫we can again use create-react-app.
‫So that's absolutely no problem.
‫And let's use, again, version five.
‫And here I'm just gonna call this redux-intro.
‫All right, so give it a few minutes
‫until this is installed and then let's meet back here.
‫Okay, so let's open up, as always, our starter files.
‫And so I'm gonna grab these and then place them right here.
‫And as always, renaming it and placing that right here.
‫And then we need to replace these files that already exists
‫and let's also immediately get rid of this junk.
‫So these three files we don't need
‫and also this CSS file right here.
‫So we only need the index.css file that I provided for you
‫and also this test file.
‫Okay, then let's take this and open it up.
‫Okay.
‫And now all we are going to do for now
‫is in this source folder, create a new file called store.js.
‫And so this is where we are going to write
‫our pure Redux code.
‫So basically, Redux without React
‫so that we can really understand Redux in isolation first.
‫And later, of course, we will then integrate the two.
‫So what we're gonna do in this section
‫is to model the bank account
‫that we have already talked about earlier,
‫but again, a bit simpler.
‫So without an account number and only with a balance,
‫a loan and also a loan purpose.
‫And actually let's start with that.
‫So just like we useReducer
‫we start by creating some initialState object.
‫So initialState.
‫And then let's set the balance to zero,
‫also the loan amount to zero.
‫And then here I'm also gonna introduce
‫a third basically state variable,
‫which I'm gonna call the loanPurpose.
‫So whenever the user asks for a loan
‫they also need to specify the purpose of that loan.
‫Okay, and now again, just like with the useReducer hook
‫it's time to define the reducer function.
‫So we can just call this reducer for now.
‫And as always, it receives the state and the action.
‫And so remember that the goal of the reducer
‫is to calculate the new state based on the current state
‫and on the received action.
‫Now, it's also important to remember
‫that reducers are not allowed to modify the existing state
‫and they're also not allowed to do any asynchronous logic
‫or other side effects.
‫So instead, what we should do with reducers
‫is to place as much logic as possible inside of them, okay?
‫But anyway, one thing that is actually different
‫between this reducer and the reducer in the useReducer hook
‫is that usually we directly pass in the initialState
‫as the default state.
‫So using here this default parameter in JavaScript.
‫So this is just a normal JavaScript feature
‫where you can specify a default parameter
‫in case there is none set.
‫So with this, we make this initialState here
‫really the state at the very beginning.
‫So then let's again use a switch statement
‫to basically select the action.type.
‫So the actions that are going to be dispatched
‫to this reducer, or actually to the Redux store,
‫they will again have the shape of a type and a payload.
‫And so basically, our reducer will look exactly the same way
‫as we are used to already.
‫And so that's why it is now so easy to learn Redux
‫when you already know useReducer.
‫So here we now need to specify our actions as always.
‫And so let's do that.
‫Now, back in the day
‫action types used to be written all uppercase.
‫For example, like this.
‫Like SET_BALANCE or maybe DEPOSIT_ACCOUNT.
‫So if you check out some older Redux code base
‫then usually you will see
‫that the action type is called something like this.
‫So many times it's a setter and all uppercase like this.
‫However, nowadays the Redux team advises
‫to write these action names in a different way.
‫So usually these action names should model what happened
‫or what should happen.
‫And so we write them in the shape of the state domain.
‫So that's the account in this case.
‫And then the event name.
‫So let's start with deposit here.
‫And I think we already touched on this earlier
‫in the WorldWise application as well.
‫But anyway, now we need to again, as always,
‫return the current state.
‫So spreading all the current state into this new state
‫that will be returned from here.
‫And then we want to set the balance to the current balance.
‫So that's at state.balance.
‫Plus the actions type load, or payload.
‫So action.payload,
‫which remember, is basically the data
‫that gets passed into the reducer
‫when the action is dispatched.
‫And again, it's very important
‫that you understand everything that we did earlier
‫with the useReducer hook.
‫Cause this is exactly the same thing.
‫Okay, then let's just duplicate this here
‫for the withdrawal.
‫Or actually let's just call this withdraw.
‫And so here it is then minus that.
‫Okay, let's also add already our default case.
‫But here we do it a bit different.
‫So before, we would usually throw
‫some new error right here, right?
‫However, in Redux,
‫or for some reason it is advised to not do that
‫and instead to simply return the original state.
‫So basically in case that the reducer receives an action
‫that it doesn't know about
‫it will simply return the original state back.
‫So the state will simply not be updated
‫but there also won't be an error.
‫Okay, next up again, account.
‫So all of these are about accounts.
‫And so all our action names in this reducer
‫will start with the account prefix.
‫But later we will have another reducer
‫which will then have another state domain name.
‫So here the next one is for request a loan
‫which can only happen if there is no loan yet.
‫So if state.loan is greater than zero
‫then just return the current state.
‫But if not not, well, then return the current state
‫and let's update then the loan.
‫So that will be the action.payload.
‫And actually, it should be action.payload.purpose.
‫So like this.
‫However, we haven't really dispatched the action yet.
‫And so this is gonna look a little bit confusing.
‫So I think that maybe we should actually leave this
‫for a little bit later.
‫So this entire part right here.
‫So we will only write this part here of the reducer later.
‫So basically, in the next lecture.
‫But now we can also do the last one
‫which is to pay the loan back.
‫Cause this one is a lot simpler.
‫So what's gonna happen here
‫is that the loan will be set back to zero,
‫the loan purpose will be set back to the empty string.
‫And of course, we need to then take that value
‫out of the balance.
‫So state.balance minus the loan.
‫Okay, and if this is a bit confusing,
‫so the way in which we are modeling this bank account,
‫it will become more clear
‫once we start using this reducer soon.
‫All right, so with this we have our reducer in place
‫and so now we can create our store.
‫And so let's do that in the next lecture.