Adding Search Params to Redux

[00:00:00]
>> Just to kind of give you some more examples here, let's go put location, animal, and breed into Redux toolkit. I probably wouldn't typically do this, because this is only used here. But the nice thing about this is it's going to allow us to keep track of all the stuff across page loads, which is going to be minorly useful to us.

[00:00:22]
So make a new file here, call it SearchParamsSlice.js. And import {createSlice} again from @reduxjs/toolkit. Export const searchParamsSlice, = createSlice Okay, so you don't really need to export that part, so just leave that. searchParamsSlice, And you're gonna say createSlice. Yeah, that's good. Name: "searchParams", initialState. You leave a location of empty string, a breed of empty string, And animal of empty string, cool.

[00:01:46]
Reducers, All right, so I'm just gonna make one reducer at the moment called all, which is just gonna replace everything. So I'm gonna say (state, action). And all this does is, is gonna say state.value = action.payload. Cuz for our particular application, we don't have an occasion where we're setting anything other than all of them all at once.

[00:02:10]
But hopefully, you can imagine, I could have one set be updateLocation or something like that, and all that we do is set just the location, one for setting just the breed, one for setting just the animal, right? That's all stuff you could do here, but for now, all we need is an all one.

[00:02:30]
Okay, and then down here, we're gonna say export const (all) = searchParamsSlice.actions. And then export default searchParamsSlice.reducer. You are mad about, yeah, I don't need a, I need an arrow function there rather. Okay, there we go. This basically looks almost identical to our previous one other than we have a little bit more initialState, otherwise, it looks identical Okay, great, let's go to store.js.

[00:03:23]
We're gonna import searchParams here, import searchParamsSlice from "./searchParamsSlice, okay? That's pretty easy, that's all set up now. Let's go to searchParams.jsx. Here, we're going to import at the top. There's a useSelector here. We're also gonna import a useDispatch up here, useDispatch. And we're going to import(all) from "./searchParamsSlice' as well.

[00:04:11]
Okay, up here with your hooks, we're gonna have a dispatch. So const dispatch = useDispatch to get that dispatch function back. Const adoptedPet, we did that already. So that's there. And then we are gonna also have our requestParams. So const requestParams is going to be assigned, useSelector state, state.searchParams.value.

[00:05:04]
And then I can drop all of this stuff up here. So you don't need any of that. Cool, and then down here, instead of saying setRequestParams, we're just gonna say, dispatch, Wrap this in an auth. There you go. So let's go back over here and look at this.

[00:05:32]
So under All XH, or just All, let's see what happens here. This is a fetch, so it's just not requesting anything, interesting.
>> The requestParams is different in the lesson plan.
>> Yeah, I mean, I think I called it searchParams, right? And that's fine, as long as you change this to be the same thing.

[00:06:09]
Cannot destructure query animal of query 1, that seems like it's a problem. If we go back to our fetch, or our searchParams here, initialState, this has to be in value. Lo and behold, here we are. That was it. So here when I was setting up searchParamsSlice, this has to be inside of value, right?

[00:06:40]
Cuz I'm saying state.value = action.payload. That makes sense it wasn't working until I actually said state.value = action.payload. That makes sense of why that was only working after I clicked on it, right?