All language subtitles for 005 Exploring The Core Redux Concepts_en

Now for exploring the Redux basics,

I have a brand new project

and this isn't even a React project.

It's an empty folder in the end,

just have some settings for my IDE here.

Now you can therefore also

just create a brand new empty folder.

We don't need a React App yet,

of course, we will add one later, but for the moment,

an empty folder we'll do.

And in that folder, you can create a new JavaScript file.

You can give it any name you want,

I will name it Redux-demo.JS.

Now we will execute this file with node JS

because node JS allows us to run JavaScript

outside of the browser.

And of course, we already have node JS installed

because we needed that for creating

our react apps for installing our third party packages

with NPM and also for running our development server.

So we already do have node JS installed.

And now here, in this empty folder, I will run NPM in it

and you should do this too.

Open a terminal or a command prompt,

navigate into this empty folder

and run NPM in it to be precise, run NPM in it -y,

which simply answers all these default questions with yes,

if you don't run it with -y,

just answer them manually with yes.

Now this gives us a package.json file,

which is not too interesting for us,

but we need it to install third-party packages.

Because now we wanna install Redux.

For this we can now run NPM install Redux.

That's the name of that package and when we run this,

this package gets installed into this

otherwise empty project folder.

We therefore node modules folder,

which now contains Redux and all the dependencies of Redux.

Now we're ready to use Redux here.

So in the Redux-demo.js file, we can now use it.

Now for that we need to import Redux.

And since we were going to execute this file with node JS,

the import will look a little bit different

than what we're used to.

We import Redux like this.

This might look strange,

but that is the default node JS import syntax

for importing a third party package.

And we import Redux from the Redux package with this syntax.

Now we need to do a couple of things.

If you recall that slide, we will need to create that store,

we will need to create a reducer function

which changes that store, we will then also need an action

and a component or since we're not using a React app yet,

any other code that sets up a subscription to the store.

So I think it makes sense to start with the store

since that is the central piece and concept of Redux.

Now we can create such a store

by using that imported Redux object.

And then on that object, we can call, createStore.

That's a method exposed by the Redux library,

which does what the name implies, it creates a store.

Now let's store that store in a constant,

which you of course don't have to name store,

but I think it's a name that makes sense,

given that we create a store here.

And then the question is, how do we proceed?

What do we do with that store?

Well, that store should manage some data

and the data which it manages is in the end

determined by the reducer function,

because it's the reducer function which will produce

new state snapshots.

The reducer has to go of spitting out a new state snapshot

whenever an action reaches it.

And when we run this code for the first time,

the reducer will also be executed with a default action,

so to say, that should spit out the initial state.

So therefore the next thing we need to add

is a reducer function.

And I will name this counter reducer,

but the name is up to you, and that stores a function.

Here I'm using this anonymous arrow function syntax.

Of course you could also create that function like this.

That would also be fine.

But I'll stick to the Arbor syntax.

And that's now our reducer function.

It's not finished though.

A reducer function is a standard JavaScript function,

but it will it be called by the Redux library

and it will then always receive two pieces of input,

two parameters, the old or existing state

and the action that was dispatched.

And then this reducer function must return a certain output.

It must always return a new state object.

And therefore a reducer function should be a pure function.

Which basically means that the same inputs,

the same values for inputs always should produce

exactly the same output.

And there should be no side effects inside of that function.

So you must not send a HTTP request

or write something to local storage

or fetch something from local storage there.

Instead, a reducer should really just be a function

that takes the given inputs, which are provided by Redux

and then produces the expected output, a new state object.

So therefore back in code here,

this reducer function will receive the state,

the current state and the action.

It receives that by default

because the reducer will ultimately be executed

by the Redux library.

And then we should return the new state,

which will replace the existing state.

Now here on the slide,

I said that the output is a state object,

it typically will be because in most applications,

state is more than just one single of value

but theoretically, it can be any kind of value type.

State can also just be a number or a string.

But in reality, it will most often be an object.

So here we then wanna return, let's say a new object

and then this object can have any structure we want.

This is totally up to us, the developer of this page.

So here we could have a counter field in this object,

which is zero for example.

Now this word user would always return an object

with a counter set to zero.

Now that might not be too realistic though.

Instead, the counter should probably be

the existing counter and then let's say

the existing counter plus one.

So state.counter + 1, referring to the existing state,

which we get automatically accessing the old counter value,

which was stored in a state and adding one to it

for the new counter value of the newly returned state.

That's now how a basic reducer could look like.

Now it's this counter reducer,

which we passed to the create store function.

Because the store needs to know which reducer

is responsible for changing that store.

Because keep in mind, it's the reducer

that works together with the store.

So the store wants to know who the reducer function is

that will manipulate the data.

So we now got our reducer function and we got our store.

Now we also need someone who subscribes to that store,

and then we need an action that can be dispatched.

Now let's start with the subscription.

For this, I'll add a new constant here

and I'll name it, counter subscriber,

and this will hold a function.

And again, you could, of course, overwrite this

with the function keyword, if you preferred that.

So does subscriber is a function here,

which does not get any parameters,

but where we then inside of the function

can reach out to the store and call, getS state.

Get state is a method which is available on the store

created with create store.

And it will give us the latest state snapshot

after it was updated.

So this subscription function will soon be triggered

whenever the state changes.

And then when it is triggered,

we can get to that latest state after it was changed

with the get state method here.

So then we have that latest state here

and we can just console log here,

console log that state here.

Now we just need to make Redux

aware of this subscriber function

and tell it that disfunction should be executed

whenever our state changes.

And we do that by reaching out to the store

and calling the subscribe method on the store,

another method which exists there.

The subscribe method then wants such a subscriber function.

So to subscribe method expects a function

which Redux will then execute for us

whenever the data and the store changed.

So here we now pass the counter subscriber to subscribe.

Important, we don't execute counter subscriber here,

we just point at it just as we did not execute

counter reducer here, but just point at it.

Because both the reducer, as well as the subscriber function

will be executed by Redux.

Now we've got a subscriber and we've got our reducer,

what we don't have is an action.

Nonetheless, let's save that file

and then open up the terminal or a command prompt,

here I'm using the integrated one.

And then you can run node and then your file name,

in my case, redux-demo.JS.

And this will execute this file

and the code inside of the file with node JS.

And if you do that, you should see an error.

You will get an error

that you cannot read property counter of undefined.

Now this is an expected error and why are we getting it?

Well, we are creating a story here

and that store has a counter reducer as it needs to,

and in that reducer, we return a state object,

which sets the counter to the old state counter plus one.

The problem is that when that store is initialized,

Redux will execute this reducer for the first time.

So this code will then run when the store is created.

The problem is that at this point of time,

state is undefined.

We have no existing state because it's the first time

this is executing.

That's why we should give state this state parameter,

a default value, which is assumed

if it would otherwise be undefined.

So that for the first time this runs, it does have a value.

If it then runs thereafter and we do have an existing state,

the default value will not be used,

but here for the first time,

we wanna have a fallback default value which will be used.

And here I'll set my default value

to an object which has a counter property,

which is zero initially.

With that change made, if we saved that

and we now try this again, we again run node Redux-demo.JS,

now this works.

But we don't see anything in the terminal,

we don't see any output.

The reason for this is that we do have a subscription here,

but we haven't dispatched any actions yet.

Yes, there is this initial initialization action

kind of dispatched by Redux,

but that does not trigger our subscription here.

We could, of course still get our initial state

by just console logging, store.getState here,

if we needed that initial state as well.

If I logged us here after the store is created,

then we see the initial state being output here.

It's an object with a counter value of one, why one?

Because the default is zero

and when this runs for the first time,

we incremented by one.

That's why this is our new states thereafter,

after the initialization.

We could do that, but I don't even wanna do that here.

Instead, let's now create and dispatch an action.

For this we again, use that store object

and on that object besides get state and subscribe,

we can call dispatch.

And dispatch is a method which dispatches an action.

Now an action is a JavaScript object.

It's a JavaScript object with a type property,

which acts as an identifier.

Typically you use a string here

and then this should be a unique string

so that every action, every distinct action,

which you dispatch leads to different things

being done in the reducer.

Currently, we have no code to do different things,

but we're going to add that soon.

So we dispatch such a object

and here we could give does a type of increment

for incrementing the counter.

In its simplest form, that is all we need.

Now with this, if we save that without doing anything else,

if I execute the Redux-demo.JS file again,

we get this output, counter two

We get this output because it is one

after the initialization, as we saw a couple of seconds ago,

and now we dispatched a new action,

which caused this reducer function to run again

and therefore the counter was again, incremented by one,

which is why we now see counter two here.

That is in a nutshell how Redux works.

But of course that's not all it's able to do

because currently the type of action we're dispatching here

has no effect at all.

So let's take a closer look at that as well.