React не отрисовывают элементы

У меня есть проблема. У меня есть работающий код, который имел бы отрисовать элементы. Дело в том, что у меня вообще в приложении есть 9 API запросов (это 9). Все компоненты работают, кроме этой компоненты. В консоль этой компоненты, данные я получаю. Скажите, я что-то неправильно делаю ли ограничения на количество запросов. Спасибо большое

import React, {useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";
import {western_movies_are_loaded} from "../redux/action_creators";

export let Western = () => {

let dispatch = useDispatch();
let western_movies = useSelector(({movies_reducer : {western_movies}}) => western_movies);

let fetchWestern = async () => {
    try {
        let response = await fetch('https://api.sampleapis.com/movies/western');
        let json = await response.json();
        console.log(json);
        dispatch(western_movies_are_loaded(json));
    } catch (e) {
        console.log(e);
    }
}

useEffect(() => {
    fetchWestern()
},[])

return (<div>Western
    {western_movies.map(el => <div key={el.id}>
        <p>{el.title}</p>
                            </div>)}
        </div>)
}

Reducers.js

import {
WESTERN_MOVIES_LOADED
} from "./action_types";

let initialState = {
western_movies : []
}
let movies_reducer = (state = initialState, action) => {
switch (action.type) {
case WESTERN_MOVIES_LOADED: {
        return {
            ...state,
            western_movies: action.payload
        }
    }
default:
return state;
}
}
export default movies_reducer;

action_creators.js

import {
WESTERN_MOVIES_LOADED
} from "./action_types";
let western_movies_are_loaded = (payload) => ({type: WESTERN_MOVIES_LOADED, payload});
export {
western_movies_are_loaded
}