I have a single search bar and I have to search two paramater strings into URL. I am using json-server as my fake API.
with single search bar, (controlled input component ), I have to fetch search results from –
- http://localhost:3000/books?q={query}
- http://localhost:3000/items?q={query}
so I made a condition for get like this –
// where all my requests to API Server are being kept – named agent.ts
axios.defaults.baseURL = 'http://localhost:3000/';
const responseBody = ( Response : AxiosResponse ) => Response.data;
get : (url : string ) => axios.get( url).then( responseBody ),
getPost : ( searchQuery? : string, fetch? : string ) => {
switch (fetch) {
case 'books' : if (searchQuery) {
return requests.get(`books?q=${searchQuery}`);
} else return requests.get('books');
case 'items' : if (searchQuery) {
return requests.get(`items?q=${searchQuery}`);
} else return requests.get('items');
default : return ;
export default getPost;
So, accordingly I made two slices for books and items respectively as –
bookSlice.ts
import { createAsyncThunk, createEntityAdapter, createSlice } from "@reduxjs/toolkit";
import uuid from "react-uuid";
import agent from "../../../../api/agent";
import { Job } from "../../../../models/Job";
import { RootState } from "../../../Redux/reduxStore";
interface BookState {
status : string,
loadedBooks : boolean;
searchTerm : string;
}
export const bookAdapter = createEntityAdapter<Book>({
selectId : ( element ) => element.bookId = uuid() // when jobId is primary key
});
// fetching list of books
export const fetchJobsAsync = createAsyncThunk<Book[], string>(
'jobs/fetchBookAsync',
async ( searchQuery, thunkAPI ) => {
try {
console.log(searchQuery, 'this reached thunk')
return await agent.getPost(searchQuery, 'books'); // here I passed as 'books' to differentiate it from 'item' 's createAsyncThunk
} catch ( error : any ) {
return thunkAPI.rejectWithValue({ error : error.data });
}}
);
export const bookSlice = createSlice({
name : 'books',
initialState : bookAdapter.getInitialState<JobState>({
status : 'idle',
loadedBooks : false,
searchTerm : '',
}),
reducers : {
setSearchTerm : ( state, action ) => {
state.searchTerm = action.payload;
}
},
extraReducers : (builder => {
builder.addCase(fetchBooksAsync.pending, ( state ) => {
state.status = 'pending'
});
builder.addCase(fetchBooksAsync.fulfilled, ( state, action ) => {
bookAdapter.setAll( state, action );
state.loadedBooks = true;
state.status = 'idle';
});
builder.addCase(fetchBooksAsync.rejected, ( state ) => {
state.status = 'idle'
});
})
});
export const jobSelector = bookAdapter.getSelectors((state : RootState ) => state.books );
export const { setSearchTerm } = bookSLice.actions;
similarly, I made exact same slice for items – itemSlice.ts
import { createAsyncThunk, createEntityAdapter, createSlice } from "@reduxjs/toolkit";
import uuid from "react-uuid";
import agent from "../../../../api/agent";
import { Item } from "../../../../models/Item";
import { RootState } from "../../../Redux/reduxStore";
interface ItemState {
status : string,
loadedItems : boolean;
}
export const itemAdapter = createEntityAdapter<Item>({
selectId : ( element ) => element.itemId = uuid() // when jobId is primary key
});
// fetching list of Items
export const fetchItemsAsync = createAsyncThunk<Items[], string>(
'jobs/fetchItemsAsync',
async ( searchQuery, thunkAPI ) => {
try {
console.log(searchQuery, 'this reached thunk') // here I console logged to check
return await agent.getPost(searchQuery, 'items'); // here I passed as 'books' to differentiate it from 'item' 's createAsyncThunk
} catch ( error : any ) {
return thunkAPI.rejectWithValue({ error : error.data });
}}
);
export const itemSlice = createSlice({
name : 'items',
initialState : itemAdapter.getInitialState<ItemState>({
status : 'idle',
loadedItems : false,
}),
reducers : {
},
extraReducers : (builder => {
builder.addCase(fetchItemsAsync.pending, ( state ) => {
state.status = 'pending'
});
builder.addCase(fetchItemsAsync.fulfilled, ( state, action ) => {
bookAdapter.setAll( state, action );
state.loadedItems = true;
state.status = 'idle';
});
builder.addCase(fetchItemsAsync.rejected, ( state ) => {
state.status = 'idle'
});
})
});
export const itemSelector = itemsAdapter.getSelectors((state : RootState ) => state.books );
export const { } = itemSlice.actions;
To both these slices, I am making use of them inside of my Post component as
here I am only including main things and not complete code of my Post component , please acknowledge
export default function Post(){
const {searchTerm, loadedBooks} = useAppSelector(state => state.books)
const {loadedItems} = useAppSelector(state => state.items)
// using entity adapters
const Books = useAppselector(bookSelector.selectAll)
const Items = useAppselector(itemSelector.selectAll)
const dispatch = useAppDispatch();
// useCallBack hook
const fetchAll = useCallBack(async () => {
const mySearch = setTimeout(() => {
await dispatch(fetchBooksAsync(searchTerm)); // call to thunk here for fetching books
await dispatch(fetchItemsAsync(searchTerm)); // call to thunk here for fetching Items}
}, [dispatch, searchTerm]);
const fetchSearchedResults = useCallBack(async () => {
if (!loadedBooks) return dispatch(fetchBooksAsync(searchTerm) // call to thunk for books
if (!loadedItems) return dispatch(fetchItemsAsync(searchTerm) // call to thunk for items
}, [dispatch, loadedBooks, loadedItems, searchTerm]);
// calling these two useCallBacks, inside of single useEffect() - hook
useEffect(() => {
fetchAll();
fetchSearchedResults();
}, [ fetchAll, fetchSearchedResuts ]); // dependencies of both the functions above, which in turn are wrapped inside of their own useCallback() hook.
return (
{Books.map((book) => (
<Typography key = {book.bookId}>{book.bookname}</Typography>)}
{Items.map((item) => (
<Typography key = {item.itemId}>{item.name}</Typography>)}
)}
// and my search component is
<TextField value = {searchTerm}
onChange = {(event) => dispatch(setSearchTerm(event.target.value))} />
// this setSearchTerm is an action dispach that is comming from my bookSlice.ts file.
)}
So, I want to take suggestions and answers/comment on 2 things here?
- Please look carefully at my agent.ts file. Please look at getPosts(), endpoint, asa you might have understood that I want to call 2 different url addresses with the single search bar, so is this way is correct (inside of my agent.ts file? ), or if not, please suggest some optimal method to do this.
- 2nd and most important, see, I am not getting any error into my application, everything is working fine, except for the fact that my useEffect() – hook is re-rendering over and over again.
As you can see the console log –
this reached thunk
bookSlice.ts:22 this reached thunk // 2times rendered
bookSlice.ts:22 this reached thunk // 2 more times rendered
bookSlice.ts:22 this reached thunk // 2 more times rendered
itemSlice.ts:22 this reached thunk// 2 times rendered
so, my bookSlice alone is getting rendered 6 times, so as an effect of this, my Books and items cards are taking time to load into my UI, which is not optimal as per user experiance perspective.
so , Please tell me why this is happening into my console. I have also seen my redux state inside of redux-dev-tools, there also
`book/fetchBookAsync` is triggered almost 6 times and same for items as well
item/fetchItemAsync // this is getting triggered 4 times
So, please tell me why this is happening? even after I used useCallback(), hook to hold the async logic and finally called both functions (useCallBack()) into a single useEffect() hook?
Am I doing any mistake into my agent.ts file?
Kindly help me in reducing the number of re-renders of my
fetchBookAsync thunk and
fetchItemsAsync thunk
Thank you.