Redux не работает в определенном маршруте только после Refre sh

Question

Я использую React-Redux, React-Router, Saga, React-Thunk Все мое приложение работает хорошо, один компонент, который также отправляет действие, которое будет отображаться, выдает мне ошибку всякий раз, когда я обновляю sh страницу ИЛИ введите URL-адрес Я сам являюсь компонентом, который рендерится только при нажатии фотографии, отображает конкретную фотографию после отправки и фильтрации состояния по идентификатору, который я отправляю в URL. Он работает нормально, когда я нажимаю на фотографию, но после одного обновления sh состояние возвращается пустой массив для рендеринга здесь - мой код

import React,{useEffect} from 'react';
import styled from 'styled-components';
import {connect} from 'react-redux';
import {fetchImages} from '../redux/actions/Actions';
const Photos = props => {
    useEffect(()=>{props.fetchRequestedPhoto()},[props.requestedPhoto.length])
    console.log(props.requestedPhoto)
}

const mapStateToProps = state =>( {
    requestedPhoto:state.images
})

const mapDispatchToProps = () =>( {
    fetchRequestedPhoto:()=>{return fetchImages()}
})

export default connect(mapStateToProps,mapDispatchToProps)(Photos);

навигация. js

import React from 'react'
import {BrowserRouter as Router , Route } from 'react-router-dom'
import HomePage from '../components/home'
import Categories from '../components/categories'
import  Photos from '../components/photos.js'
import Category from '../components/category'
const Routes = () => {
   return(
       <Router>
       <Route exact path='/' component={HomePage}></Route>
       <Route exact path='/categories' component={Categories }></Route>
       <Route  exact path='/category/:category_id' component={Category}></Route>
       <Route exact path='/photo/:photo_id' component={Photos}></Route>
       </Router>
   )
}
export default Routes;

Action. js

import axios from 'axios';
import { GetCategories,GetImages } from './actionTypes'
export function fetchCategories() {
   var url = 'http://localhost:4000/all_categories';
   return (dispatch) => {
       return axios.get(url).then((res) => {
           dispatch({
               type: GetCategories,
               payload: res.data
           })
       })
   } 
}
export function fetchImages(){
   var url ='http://localhost:4000/all_images';
   return(dispatch) => {
       return axios.get(url).then((res)=>{
           dispatch({
               type:GetImages,
               payload:res.data
           })  
       })
   }
}

saga. js

import {takeEvery,delay,put} from 'redux-saga/effects'
import axios from 'axios';

function* getImagesAsync(){
   delay(4000)
   const response=axios.get('http://localhost:4000/all_images');
   const payloadImages = response;
   yield put({type: 'GetImagesSaga', payload:payloadImages});   
}
export function* watchFetchImages(){
   yield takeEvery("GetImages",getImagesAsync);
}

Редуктор. js

import { GetCategories , GetImages } from "../redux/actions/actionTypes"
const initialState = {
   categories: [],
   images:[]
};
const rootReducer = (state = initialState, action) => {
   switch (action.type) {
       case GetCategories:
           return {...state, categories:action.payload}
       case GetImages:
           return{...state,images:action.payload}
       default:
       return state;
   }
};
export default rootReducer;

Кто-нибудь может мне помочь с этим ??