Hi and welcome back to our React native and Redux toolkit series.
Today we're going to be talking about one
of the core concepts in Redux Toolkit called slices.
A slice in Redux toolkit refers
to a self-contained piece of state and logic for managing that state.
In other words, a slice is a part of the overall state
of your application that you want to manage in a modular way.
So I do want to provide an example for our donation app.
For example, you want to keep data
and state about a logged in user in a separate module so that you have all
the information about the user in a separate module.
So let's say that Azzahri is the one that's logged in.
You could have their first name,
their last name and their user ID styled in a separate module and any updates
for the user is going to be happening in that slice.
Another example of a slice that we could
create within our donation mobile application could be the categories
that are used for our donation items and the donation item list itself.
We could have another slice for managing
a single donation item so that we could create this singular screen where
an information about single donation item is displayed.
So slices are useful in Redux because it
provides an improved code
structure for your application.
They help you to structure your code
in a clear and organized way making
it easier to understand and maintain.
Now I want to go over how you might create
a slice in your React native project.
So for that we are going to create a new
directory in our donation application called Redux.
And here we're going to create another
directory that is going to be called Reducers.
And these reducers are the ones that are
going to include all of the slices that we're going to create for our project.
So the first one that I'm going to create
is going to be the simplest one and I'm going to call it user JS.
And in order to create a slice,
you might need to import create slice from Redux JS toolkit
and we already have that installed and let's call our slice user.
And this user is going to use create slice
method that we just imported and it's going to have several options.
The first option that we're going to give
it is its name and the name of the slice is used to identify it in the Redux store.
So let's give this a name of user.
The second option that we want to give it is initial state and this initial state is
going to be the initial state for every user that we're going to create.
So for example, for this purpose we can
create initial state object right above this.
And let's say that this user is going
to have a first name and the first name is going to be Nata.
Because my name is Nata, you can write your own first name here
and then there's going to be a last name and mine is Vacheishvili.
It's a last name from Georgia because
I'm Georgian, you can create any last name that you want.
It can be yours, it can be your friends, doesn't really matter.
And let's say that this user has a user ID and I'll just say it is one for now.
And then you're going to have something called Reducers here and reducers is going
to be an object that's going to have bunch of actions in a form of functions.
So Reducers are functions that update
the state of the slice in response to actions.
So here let's say that our action is going to be updating First Name.
So to update First Name we're going to get the state of our slice.
It might have changed from initial state or it might be the same as initial state,
depends on when you're using this function.
And then it's going to also contain an action that is going to contain some
kind of data that you might want to pass to it.
So in order to update the state of the first name, we're just going to say
state first name, action payload that contains the information
that we sent to the reducer function and let's call it First Name.
Great. So this is all about creating slice.
Now if you want to be able to use this
function from your screens, what you have to do is export them.
So let's export update First Name
and let's say that we're exporting it from user actions.
So it's going to grab it exactly from here.
See when I click into here,
this is the function that is highlighted by my editor.
And then we also want to export the user as well because later on we are going
to be using this user for combined reducer function that we set up our store so
that we make it available to all of our screens and components.
But I'm not going to get into that yet
because I don't want to make this complicated.
So let's finish here for today and thanks so much for watching.
I'll see you in the next video.
And we're going to be going over much more tools that Redux offers to us.