All language subtitles for 022 Splitting Our Code_en

Now to come to an end in this module

where we learned a lot of important things.

I wanna split up this index JS file into store folder.

It's actually quite a small file

not too much code in it, but of course,

in your typical a React application

where you have multiple state slices,

this can become a very long file.

So therefore it might be worth splitting it

up into smaller pieces.

And when using Redux Toolkit

it could make sense to put every slice into its own file.

So we could add a new file in the store folder

and let's say the counter-slice.JS file

or just counter.JS, the file name is up to you.

And then we want to create

and manage the counter specific state and slice in there.

So we would grab the initial counter state

and the entire counter slice cut that

and add it into counter JS file.

Now to use, create slice.

We of course now need to import that here.

So we import create slice from at Redux JS toolkit

and we still also need to use counter slice

in a different folder after.

So we should export it.

For example, as a default export

we can export counter slice.

Now we can do the same for off.

So I'll add an off JS file and take my initial

off state and D off slice cut debt

from the index JS file and move it into off JS.

And then also import create slice here

from add to Redux Toolkit.

And then also here export this default off slice.

Now in index JS, we want to merge all those slices together.

Therefore we can remove, create slice in there.

We don't need that import anymore

because we're not creating any slices in this file anymore.

Instead, we focus on creating that main store

and merging all the slice reducers together.

Hence we can now import the counter slice

from ./counter, or since we only really

needed to reducer in here, we actually go

to the counter and we just export the reducer.

So we don't export the entire slice

but just it's reducer part by doing that in index JS

we could import the counter reducer here

since that is what we're exporting as a default.

And then just assign that

as a reducer to counter the counter reducer

and do the same for off the JS

just export the reducer year and an index JS.

Then therefore import the auth reducer

from ./auth and assign this

as a value for the auth key in that reducer map.

Now regarding the actions,

I want to export those from there,

from the files into which they belong.

So the counter actions should be exported here

in the counter JS file still by accessing dot actions

and exporting that as a named export

at the same for auth I'll grab that export

and index JS and move that into auth JS.

Now with that,

if we saved this we'll need to fix a couple of imports

in counter JS for example,

where I try to import counter actions from the index file

we now need to import them from the counter file

in the store folder in auth JS, we need to import

auth the actions from the auth file in the store folder.

In header, we need to import

auth actions from the auth file as well

and then user profile or not using anything of that.

But if we now save that, if we reload, it works just as

before all the state works as before

but now we're splitting this up

and in bigger application stat can ensure

that our code stays maintainable and is easier to manage

because now we have a lean index JS file

and then pretty lean files for our different state slices

which are then focused

on one specific type of state,

not required here but definitely helpful

in bigger applications.

And even here, it certainly doesn't hurt.