Trying to getState from Redux to React Component but it is returning infinite Loop

This project:
https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-and-redux-portfolio-project/modules/fecp-reddit-client/kanban_projects/reddit-client

and here is my GitHub Repo:

more precises where the problem is, is in this part of the repo:

I am trying to access my Redux on a Parent Component then send down its values as props. I’m getting an infinite loop in the console.

At first It was working I had 1 component that got a bit to large with a lot of logic, but I had no issues. So I decided to cut up this component make it a parent component that will access all the relevant Redux and pass it down it it’s children.

So when I made the children and having the Parent to access the Redux is where I started getting this issue

As I dispatch my action creator (which is a thunk) through the useEffect Hook even though I put a dependency array for both the dispatch and the useSelector I’m running into an infinite re-render loop but this doesnt break the program still, but it is a major concern for me. Because I have a condition if there is no image link from api then I want to render a small div with rgba values set to random numbers so this is rerendering over and over again.

Here are the files:
listOfAllSlice.js /// REDUX

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import reddit from '../../util/reddit-data.js';

export const listOfAllThunk = createAsyncThunk(
    'list/listOfAllThunk',
    async () => {
        const subreddits = await Promise.resolve(reddit.getSubreddits());
        return subreddits;
    }
);


const listOfAllSlice = createSlice({
    name: 'list',
    initialState: {
        listOfAll: [],
        // nameList: {},
        subListLoading: false,
        subListError: false
    },
    extraReducers: {
        [listOfAllThunk.pending]: (state) => {
            state.subListLoading = true;
            state.subListError = false;
        },
        [listOfAllThunk.fulfilled]: (state, action) => {
            state.subListLoading = false;
            state.subListError = false;
            
            state.listOfAll = action.payload.map(child => ({ 
                url: child.url,
                id: child.id,
                name: child.display_name,
                title: child.title,
                prefix: child.display_name_prefixed,
                headerImg: child.header_img,
                iconImg: child.icon_img,
                bannerImg: child.mobile_banner_image
            }))
 
        },
        [listOfAllThunk.rejected]: (state) => {
            state.subListLoading = false;
            state.subListError = true;
        }
    }
});


export const selectListOfAll = state => state.listOfAll.listOfAll;
export default listOfAllSlice.reducer;

The Parent Componet that Wants to access the Slice:
Banner.js

import React, { useState, useEffect, useRef, useLayoutEffect, useCallback } from 'react';
import './Banner.css';
import { useSelector, useDispatch } from 'react-redux';
import { selectListOfAll, listOfAllThunk } from '../../feature/listOfAll/listOfAllSlice.js';
import HeaderImg from './headerImg/HeaderImg.js';
import BannerImg from './bannerImg/BannerImg.js';
import TitleImg from './titleImg/TitleImg.js';


const Banner = () => {

    const dispatch = useDispatch();
    const allList = useSelector(selectListOfAll);

    // flag
    const allListFlag = Object.keys(allList).length;

    useEffect(() => {
        if (allListFlag === 0) { // even if i remove the flag or put whatever flag the useEffect will still read that line of code completly disregarding my condition
        dispatch(listOfAllThunk())
        }

    }, [dispatch, allList]);  // if dont put allList in the dependcy array I wont get anything if I put it then I get an infinite loop 



    const location = window.location.href;

    const regex = /http(s)?:\/\/localhost:3000(\/dragon)?\//i;

    const regexResult = location.replace(regex, '');

    const index = allList.findIndex(child => child.name === regexResult)

    return (
        <section className="banner-section">
            <HeaderImg 
                idx={index}
                allList={allList}
            />
            
            <BannerImg 
                idx={index}
                allList={allList}
            />
            <TitleImg 
                idx={index}
                allList={allList}
            />
        </section>
    )
}

export default Banner;

Child 1:
HeaderImg.js

import React, { useState, useEffect } from 'react';
import randomNum from '../../../util/randomNumbers';


const HeaderImg = (props) => {

    const { idx, allList } = props;

    console.log('headerIMG');
    console.log(allList);
    console.log('headerIMG');

    return (
        <div 
        className="header-img-wrapper"
        style={{backgroundColor: `rgba(${randomNum()}, ${randomNum()}, ${randomNum()}, 0.4)`}}>
        {
            idx !== -1 && allList[idx].headerImg !== null 
            ?
            <img 
                key={allList[idx].id} 
                src={allList[idx].headerImg} 
                alt="header-display" 
            />
            :
            <img 
                // key={allList[idx].id} 
                src="https://b.thumbs.redditmedia.com/hOn2BgW06eQdpNY-RvF3UGBtbG_CFbr4XkotMYLWhEc.png" 
                alt="header-display" 
            />
        }
        </div>
    )
}

export default HeaderImg;

Child 2:
BannerImg.js

import React, { useState, useEffect} from 'react';
import randomNum from '../../../util/randomNumbers';


const BannerImg = (props) => {

    const { idx, allList } = props;

    console.log('bannerIMG');
    console.log(allList);
    console.log('bannerIMG');


    console.log(idx)

    return (
        <>
        {
            idx !== -1 && allList[idx].bannerImg.length > 0 
            ?   
            <div key={allList[idx].id} className="banner-img-wrapper">           
            <img src={allList[idx].bannerImg} alt="banner-img" />         
            </div> 
            : 
            <div 
                // key={allList[idx].id}
                className="no-img"
                style={{backgroundColor: `rgba(${randomNum()}, ${randomNum()}, ${randomNum()}, 0.4)`}}>
            </div>
        }
        </>
    )
}

export default BannerImg;

Child 3:
TitleImg.js

import React from 'react';


const TitleImg = (props) => {
    
    const { idx, allList } = props;

    console.log('titleIMG');
    console.log(allList);
    console.log('titleIMG');

    return (
        <div className="title-section">

        <div className="icon-img">

        {
            idx !== -1 && allList[idx].iconImg !== null && allList[idx].iconImg.length > 0 
            ?
            <img 
                key={allList[idx].id}
                src={allList[idx].iconImg} 
                alt="icon-display" />
            :
            <img 
                // key={allList[idx].id}
                src="https://b.thumbs.redditmedia.com/xDPX3Hq8IYJPpEdTsDGDJ_LZCnABwL13cg0DE78HU-w.png" 
                alt="temp" 
            />
        }

        </div>

        <h1>{idx !== -1 ? allList[idx].title : 'Home'}</h1>
        <h1>{idx !== -1 ? allList[idx].prefix : 'r/Home'}</h1>

        </div>
    )
}


export default TitleImg;

I have fixed my error the window.location.href was not updating as i was navigating to a new page so window.location.href was pretty much static. So I imported useLocation from react-router-dom and they have an object with pathname so with a bit of regex was able to manipulate that to have my page interact smoothly with the page navigation and display the desired states.