Dispatch one action multiple times

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;