I have an application where i fetch a list of users and display them as a list initially. I also have a search where you can search for a single user and it makes an api call and fetches the single user and displays it. You can also click on a any user item in the list and it should open up a modal to show some extra details about the user onclick of modal i am again making an api call for fetching single user same as search. Problem is when the singleUser is updated in redux both the List component where the signle user is displayed on search and the component containing modal is updated causing a rerender and modal closing. Should i keep a separate state for the user fetched on click of modal and search or is there another way to do it?
userSlice.js
import {createSlice, createAsyncThunk} from '@reduxjs/toolkit';
import { getData } from '../../service';
const initialState={
users:[],
singleUser:{},
loading:false,
error:{},
isModalUser:false
}
export const fetchUserData=createAsyncThunk(
'users/fetchUsers',
async (endpoint)=>{
const res= await getData(endpoint);
return res.data
}
)
export const fetchUser=(endpoint)=>fetchUserData(endpoint);
export const fetchSingleUser=(endpoint)=>fetchUserData(endpoint);
const usersSlice=createSlice({
name:'users',
initialState,
reducers:{
resetSingleUser:(state)=>{
state.singleUser={}
},
setModalUser:(state,action)=>{
state.isModalUser=action.payload;
}
},
extraReducers:(builder)=>{
builder.addCase(fetchUserData.fulfilled,(state,action)=>{
if(Array.isArray(action.payload))
state.users=action.payload
else
state.singleUser=action.payload
state.loading=false
state.error={}
})
.addCase(fetchUserData.pending,(state,action)=>{
if(action.meta.arg==='users')
state.users=[]
state.singleUser={}
state.loading=true;
})
.addCase(fetchUserData.rejected,(state,action)=>{
if(action.meta.arg==='users')
state.users=[]
else
state.singleUser={}
state.loading=false;
state.error=action.payload
});
}
})
export const {getAllUsers,getSingleUser,resetSingleUser,setModalUser}=usersSlice.actions
export const selectAllUsers=(state)=>state.users.users;
export const selectUser=(state)=>state.users.singleUser;
export const loadingState=(state)=>state.users.loading;
export const errorState=(state)=>state.users.error;
export const isModalUserState=(state)=>state.users.isModalUser;
export default usersSlice.reducer
List.jsx
import React, { useEffect } from 'react'
import {useSelector, useDispatch} from 'react-redux'
import { selectAllUsers, selectUser,loadingState, isModalUserState } from './usersSlice'
import { fetchUser } from './usersSlice';
import User from '../User/User';
export default function List() {
const users=useSelector(selectAllUsers);
const singleUser=useSelector(selectUser)
const loading=useSelector(loadingState)
const isModalUser=useSelector(isModalUserState)
const dispatch=useDispatch()
useEffect(()=>{
dispatch(fetchUser('users'))
},[])
console.log(users,singleUser)
return (
<>
{loading && <div className='container'>Loading ...</div>}
{!isModalUser && singleUser?.login && <User name={singleUser.login} githubUrl={singleUser.url} pic={singleUser.avatar_url}/>}
{!singleUser?.login && users.length>0 && users.map((user)=>(
<User key={user.url} name={user.login} githubUrl={user.url} pic={user.avatar_url}/>
))}
</>
)
}
User.jsx
import React ,{ useState } from 'react';
import UserDetail from './UserDetail';
import { useDispatch, useSelector } from 'react-redux';
import { fetchSingleUser,selectUser,resetSingleUser,setModalUser } from '../List/usersSlice';
import ReactModal from 'react-modal';
export default function User({pic,name,githubUrl}) {
const [isModalOpen,setIsModalOpen]=useState(false);
const dispatch=useDispatch();
const user=useSelector(selectUser);
const handleModalOpen=()=>{
console.log('open')
dispatch(fetchSingleUser(`users/${name}`))
dispatch(setModalUser(true))
setIsModalOpen(!isModalOpen)
}
const handleModalClose=()=>{
console.log('closed')
setIsModalOpen(!isModalOpen)
dispatch(setModalUser(false))
dispatch(resetSingleUser())
}
return (
<>
<div onClick={handleModalOpen}>
<UserDetail img={pic} name={name} githubUrl={githubUrl}/>
</div>
<ReactModal isOpen={isModalOpen} onRequestClose={handleModalClose} style={{overlay:{backgroundColor: 'rgba(0, 0, 0, 0.8)'},content:{margin:'5rem auto',height:'15rem'}}}>
<UserDetail img={pic} name={name} githubUrl={githubUrl} followers={user.followers} following={user.following}/>
</ReactModal>
</>
)
}
Search.jsx
import React, { useEffect, useState } from 'react'
import { useDispatch} from 'react-redux';
import { fetchSingleUser } from '../List/usersSlice';
export default function Search() {
const [searchInput,setSearchInput]=useState('');
const dispatch=useDispatch();
const handleSearchInput=(e)=>{
setSearchInput(e.target.value)
}
useEffect(()=>{
const id=setTimeout(()=>{
dispatch(fetchSingleUser(`users/${searchInput}`))
},1000)
return()=>clearTimeout(id)
},[searchInput])
return (
<div className='container search-container'>
<label className='search-container-label'>Search: <input className='search-container-input' name='Search' onChange={handleSearchInput}/></label>
</div>
)
}
