WEBVTT

1
00:00:00.160 --> 00:00:04.020
Hi and welcome back to our React
native and Redux toolkit series.

2
00:00:04.040 --> 00:00:05.900
Today we're going to be talking about one

3
00:00:05.930 --> 00:00:09.620
of the core concepts
in Redux Toolkit called slices.

4
00:00:09.650 --> 00:00:12.420
A slice in Redux toolkit refers

5
00:00:12.450 --> 00:00:17.900
to a self-contained piece of state
and logic for managing that state.

6
00:00:17.920 --> 00:00:21.220
In other words,
a slice is a part of the overall state

7
00:00:21.240 --> 00:00:25.140
of your application that you
want to manage in a modular way.

8
00:00:25.170 --> 00:00:29.260
So I do want to provide
an example for our donation app.

9
00:00:29.290 --> 00:00:31.660
For example, you want to keep data

10
00:00:31.690 --> 00:00:37.060
and state about a logged in user
in a separate module so that you have all

11
00:00:37.090 --> 00:00:40.500
the information about the user
in a separate module.

12
00:00:40.530 --> 00:00:44.500
So let's say that Azzahri is
the one that's logged in.

13
00:00:44.530 --> 00:00:46.580
You could have their first name,

14
00:00:46.610 --> 00:00:51.660
their last name and their user ID styled
in a separate module and any updates

15
00:00:51.680 --> 00:00:55.660
for the user is going to be
happening in that slice.

16
00:00:55.680 --> 00:00:58.020
Another example of a slice that we could

17
00:00:58.050 --> 00:01:02.940
create within our donation mobile
application could be the categories

18
00:01:02.970 --> 00:01:09.260
that are used for our donation items
and the donation item list itself.

19
00:01:09.290 --> 00:01:12.260
We could have another slice for managing

20
00:01:12.290 --> 00:01:17.180
a single donation item so that we could
create this singular screen where

21
00:01:17.210 --> 00:01:21.770
an information about single
donation item is displayed.

22
00:01:21.800 --> 00:01:26.380
So slices are useful in Redux because it

23
00:01:26.410 --> 00:01:28.129
provides an improved code

24
00:01:28.329 --> 00:01:30.260
structure for your application.

25
00:01:30.290 --> 00:01:32.620
They help you to structure your code

26
00:01:32.650 --> 00:01:35.178
in a clear and organized way making

27
00:01:35.378 --> 00:01:37.850
it easier to understand and maintain.

28
00:01:37.880 --> 00:01:41.506
Now I want to go over how you might create

29
00:01:41.706 --> 00:01:44.700
a slice in your React native project.

30
00:01:44.730 --> 00:01:47.380
So for that we are going to create a new

31
00:01:47.410 --> 00:01:51.180
directory in our donation
application called Redux.

32
00:01:51.210 --> 00:01:53.490
And here we're going to create another

33
00:01:53.520 --> 00:01:56.460
directory that is going
to be called Reducers.

34
00:01:56.490 --> 00:01:59.020
And these reducers are the ones that are

35
00:01:59.050 --> 00:02:03.380
going to include all of the slices that
we're going to create for our project.

36
00:02:03.410 --> 00:02:05.490
So the first one that I'm going to create

37
00:02:05.520 --> 00:02:10.100
is going to be the simplest one
and I'm going to call it user JS.

38
00:02:10.130 --> 00:02:12.450
And in order to create a slice,

39
00:02:12.480 --> 00:02:18.980
you might need to import create slice
from Redux JS toolkit

40
00:02:19.010 --> 00:02:26.100
and we already have that installed
and let's call our slice user.

41
00:02:26.130 --> 00:02:29.340
And this user is going to use create slice

42
00:02:29.370 --> 00:02:34.100
method that we just imported and it's
going to have several options.

43
00:02:34.120 --> 00:02:35.780
The first option that we're going to give

44
00:02:35.810 --> 00:02:41.860
it is its name and the name of the slice
is used to identify it in the Redux store.

45
00:02:41.890 --> 00:02:44.900
So let's give this a name of user.

46
00:02:44.930 --> 00:02:50.610
The second option that we want to give it
is initial state and this initial state is

47
00:02:50.640 --> 00:02:54.860
going to be the initial state for every
user that we're going to create.

48
00:02:54.890 --> 00:02:58.780
So for example, for this purpose we can

49
00:02:58.810 --> 00:03:04.240
create initial state
object right above this.

50
00:03:04.400 --> 00:03:07.940
And let's say that this user is going

51
00:03:07.970 --> 00:03:11.100
to have a first name and the first
name is going to be Nata.

52
00:03:11.130 --> 00:03:15.140
Because my name is Nata,
you can write your own first name here

53
00:03:15.170 --> 00:03:19.300
and then there's going to be a last
name and mine is Vacheishvili.

54
00:03:19.330 --> 00:03:21.610
It's a last name from Georgia because

55
00:03:21.640 --> 00:03:25.380
I'm Georgian, you can create
any last name that you want.

56
00:03:25.410 --> 00:03:28.660
It can be yours, it can be your
friends, doesn't really matter.

57
00:03:28.690 --> 00:03:35.580
And let's say that this user has a user
ID and I'll just say it is one for now.

58
00:03:35.610 --> 00:03:41.320
And then you're going to have something
called Reducers here and reducers is going

59
00:03:41.350 --> 00:03:48.020
to be an object that's going to have
bunch of actions in a form of functions.

60
00:03:48.050 --> 00:03:50.220
So Reducers are functions that update

61
00:03:50.250 --> 00:03:53.540
the state of the slice
in response to actions.

62
00:03:53.570 --> 00:04:01.380
So here let's say that our action
is going to be updating First Name.

63
00:04:01.410 --> 00:04:06.860
So to update First Name we're going
to get the state of our slice.

64
00:04:06.890 --> 00:04:11.540
It might have changed from initial state
or it might be the same as initial state,

65
00:04:11.570 --> 00:04:14.220
depends on when you're
using this function.

66
00:04:14.250 --> 00:04:18.860
And then it's going to also contain
an action that is going to contain some

67
00:04:18.890 --> 00:04:22.540
kind of data that you
might want to pass to it.

68
00:04:22.570 --> 00:04:27.500
So in order to update the state
of the first name, we're just going to say

69
00:04:27.530 --> 00:04:36.580
state first name, action
payload that contains the information

70
00:04:36.600 --> 00:04:44.540
that we sent to the reducer function
and let's call it First Name.

71
00:04:44.560 --> 00:04:47.700
Great.
So this is all about creating slice.

72
00:04:47.720 --> 00:04:51.300
Now if you want to be able to use this

73
00:04:51.330 --> 00:04:55.700
function from your screens,
what you have to do is export them.

74
00:04:55.720 --> 00:04:59.700
So let's export update First Name

75
00:04:59.720 --> 00:05:05.300
and let's say that we're
exporting it from user actions.

76
00:05:05.330 --> 00:05:08.420
So it's going to grab
it exactly from here.

77
00:05:08.450 --> 00:05:10.140
See when I click into here,

78
00:05:10.160 --> 00:05:14.100
this is the function that is
highlighted by my editor.

79
00:05:14.130 --> 00:05:20.180
And then we also want to export the user
as well because later on we are going

80
00:05:20.210 --> 00:05:27.220
to be using this user for combined reducer
function that we set up our store so

81
00:05:27.250 --> 00:05:31.020
that we make it available to all
of our screens and components.

82
00:05:31.040 --> 00:05:32.780
But I'm not going to get into that yet

83
00:05:32.800 --> 00:05:35.100
because I don't want
to make this complicated.

84
00:05:35.130 --> 00:05:39.180
So let's finish here for today
and thanks so much for watching.

85
00:05:39.200 --> 00:05:40.740
I'll see you in the next video.

86
00:05:40.770 --> 00:05:45.640
And we're going to be going over much
more tools that Redux offers to us.