Dispatch one action multiple times - reactjs

Question

I m trying to fetch list of artist from asyncStorage and assign that artist to state name "getArtist" (result is in string so i need to parse to convert into array, it look something like this ["abc", "xyz" , "uvw"]). After that i m mapping it and passing id to AlbumList.js. In AlbumList i m calling a redux-action "searchArtistAlbum(id)" passing id in it and getting list of all albums of that artist, but as i have console.log("showSearchData ===", showSearchData) for artist name, there are 3 artist so it should be called 3 times i.e artist1, artist2, artist3 but its been called like 1.call artist1, artist1, artist1 , 2.call artist2, artist2, artist2 and 3.call artist3, artist3, artist3 and atlast values are same i.e artist3, artist3, artist3. and if i try to pass "showSearchData" as variable in useEffect([showSearchData]) it go into infinite loop.
Home.js
import React, {useEffect, useState} from 'react';
import {View, Text, ScrollView, AsyncStorage} from 'react-native';
import {connect} from 'react-redux';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import Label from '../components/Label';
import HomeHeader from '../components/HomeHeader';
import AlbumList from '../components/AlbumList';
export const Home = ({ navigation, mainNavigation}) => {
const [getArtist, setGetArtist] = useState([])
useEffect(() => {
getTokenResult()
},[])
const getTokenResult = async () => {
let getResult = await AsyncStorage.getItem('access_token')
let getCat = await AsyncStorage.getItem('categories')
let getArt = await AsyncStorage.getItem('artists')
setGetArtist(JSON.parse(getArt))
console.log("getResult ", getResult)
console.log("getArt ", typeof JSON.parse(getArt), JSON.parse(getArt))
console.log("getCat ", getCat)
if (!getResult || !getResult == undefined && !getResult == null){
mainNavigation.navigate('Login')
} else if(!getArt || !getArt === undefined && !getArt == null){
mainNavigation.navigate('Artist')
} else if(!getCat || !getCat === undefined && !getCat == null){
mainNavigation.navigate('Category')
}
}
return (
<ScrollView
style={{flex: 1, backgroundColor: 'rgb(30,30,30)', padding: 15}}>
<HomeHeader />
<View
style={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
}}>
</View>
{
getArtist && getArtist !== undefined && getArtist.length > 0 ?
getArtist?.map((item, index) => {
return (
<AlbumList id={item && item !== undefined ? item : ""} key={index} />
)
})
:
null
}
</ScrollView>
);
};
const mapStateToProps = state => ({
getToken: state.getToken,
});
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(Home);
AlbumList.js
import React, {useEffect} from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
ScrollViewComponent,
} from 'react-native';
import {searchArtistAlbum} from '../redux/actions/searchAction';
import AlbumCard from './AlbumCard';
import {connect} from 'react-redux';
function AlbumList({id, searchArtistAlbum, showSearchData}) {
const arr = [1, 2, 3, 4, 5];
useEffect(() => {
searchArtistAlbum(id);
}, []);
console.log('showSearchData === ',showSearchData && showSearchData !== undefined && showSearchData?.items && showSearchData?.items[0]?.artists[0]?.name);
return (
<View style={styles.contView}>
<Text style={styles.textView}>{showSearchData && showSearchData !== undefined && showSearchData?.items !== undefined ? showSearchData?.items[0]?.artists[0]?.name : ""}</Text>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
{showSearchData && showSearchData !== undefined
? showSearchData?.items?.map((item, index) => {
return <AlbumCard image={item && item !== undefined ? item?.images[1]?.url : ""} key={index} />;
})
: null}
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
textView: {
color: '#fff',
fontSize: 23,
fontWeight: '700',
},
contView: {
paddingTop: 20,
width: '100%',
},
});
const mapStateToProps = state => ({
showSearchData: state.showSearchData,
});
const mapDispatchToProps = {searchArtistAlbum};
export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);
AlbumCard.js
import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
function AlbumCard({image}) {
return (
<View style={styles.contView}>
<Image
style={styles.img}
source={{
uri:image && image !== undefined ? image : 'https://images4.alphacoders.com/476/thumb-350-47698.png',
}}
/>
<View style={styles.textView}>
<Text style={styles.textView1}>AlbumCard</Text>
<Text style={styles.textView2}>Beast Playlist</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
img: {
width: 150,
height: 150,
},
contView:{
paddingVertical: 20,
marginRight: 20,
},
textView:{
marginVertical: 10
},
textView1:{
fontSize:14,
fontWeight: '700',
color:'#fff'
},
textView2:{
fontSize:14,
color:'rgb(150,150,150)',
paddingVertical: 3,
}
});
export default AlbumCard;