Hi and welcome back to our video tutorials on React Redux.
So today we're going to be talking about how to create a new reducer
for the donation items so that we can select a category and select the items
from our donation list that match up with those categories.
I also want to talk about resetting and purging our stores.
So we're going to be seeing an example in this video for that.
So first let's create the donations.js file and let's create the slice here.
Let's import it from Redux toolkit.
Redux Toolkit.
And then we want to be creating
the donations and we're going to use the create slice
function for that and pass in some options.
And first of all, we're going to give it a name that is going to be donations.
And we're going to give it some initial state.
And that initial state is going to be
grabbed from an object that we are going to create here.
An initial state is going to have items for the donation items and it's also going
to have a selected donation ID that is going to be set to null.
And the reason we're going to be needing
this selected donation ID is because whenever a user clicks on this item,
what we want to do is we want to redirect them to a new page and save the selected
ID so that we can display the information according to the selected donation ID.
Now what we're going to do is create some
reducers and we're going to have a reset donations reducer that is going to take
in nothing and just return our initial state here.
And then we're also going to have an updater for our selected donation ID.
And it's going to take the current state and the action that we pass here and set
the state selected donation ID to whatever we pass here.
payload great.
So now what we want to do is go here and create the donations
and use the donations that we created inside here and let's import it from here.
But to do that, we're also going to have to export the reducer.
So let's export default donations reducer and let's export these functions as well.
Set donations and update selected donation ID so that we can use it whenever we want
and those are going to come from the actions.
Great. So now we should be having no issues here.
And now if we go to our home page,
let's just quickly console log what's inside our donations.
So let's use the selector for that.
Let's call it donations.
And I'm going to get rid of this logger
here so that we're able to see what we're console logging very clearly.
And here I'm going to say console log.
This is our current donation state and then donations.
So let's reload our application and we see.
This is our current donation state
and then items are empty and selected donation ID is set to null.
And what I'm quickly going to do here is
I'm going to go and copy the items that we want to paste here.
Great.
So I have copied it and I'm going to paste it here.
I'm going to save this.
And we have this in our initial state right now that was set from here.
And if I go to my home page and check out what's inside my donation items,
I'm going to say that there is nothing inside these items.
And this is expected.
And it is expected because whenever we
created the donation slice for our store, what happened is that it already got
the initial state, which was items that were empty,
and it put it in the async storage and persisted the state.
So the only way to update these items
from now on is going to be from the reducer itself.
So we don't have to call a reset donations
function that would reset our initial state for the donation store.
Or the second way to do this is going to purge the whole store and reset
everything like user settings, categories, and donation to its initial state.
So first of all, I'm just going to quickly try that.
To do that, all you need to do is say persistor, purge here.
And this file is naturally going to be called so this function will work.
And if I reload now,
I'm going to see that donation state has bunch of items inside it.
But if I want to, what I also could do is go to donations.
I'm quickly going to get rid of this
again, okay, so let me copy it and get rid of it.
And I'm going to leave the purge function in.
So it should have already ran,
but I'm going to reload and now my items are empty.
So if I get rid of this, I want to show you the different way as
well and put the items back here and go to my whole page.
If I were to reload, my items should still
be empty because I haven't dispatched any action.
But if I dispatch from here,
reset donations now, let's import this quickly and let's reload.
I'm going to see that because I use the reducer, all of my items are back here.
So whether you decide to purge or whether
you decide to reset from the donations here or your reducers, it's your choice.
But if you're ever facing an issue where you want to overwrite the items and you
don't get the updated values, it's because you need to purge or you need
to reset the items specifically from your reducers.
And I'm going to get rid of this now.
And actually, I will leave these items
here and it's going to be in the description of the video as well.
But I will go in more details about what's
defined here and why we might need it in the next video.
And in the next video,
we're also going to set up the donations items to be shown up here.
So thanks so much for watching and I'll see you in the next video.