I need your help. I take the data from the API and draw it using Redux. The Action_adventure component has this data drawn and each element has an add_to _favourites button to add to the Favorites.js component. How can I add movies to a component? Thank you very much

Action_adventure.js

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

export let Action_adventure = () => {

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

let fetchAdventureBooks = async () => {
    try {
        let response = await fetch('https://api.sampleapis.com/movies/action-adventure');
        let json = await response.json();
        dispatch(adventure_movies_are_loaded(json));
    } catch (e) {
        console.log(e);
    }
}

useEffect(() => {
    fetchAdventureBooks();
},[])

return (<div>Adventure
    {adventure_movies.map(el => <div key={el.id}>
                {el.title}
                <img src={el.posterURL} className="adventure_movie"/>
                <button onClick={() => add_favourite_movie(el.id)}>Add to favourite</button>
                                </div>)}
        </div>)
}

Reducers.js

import {
ADD_FILMS_TO_FAVOURITE,
ADVENTURE_MOVIES_LOADED
} from "./action_types";

let initialState = {
adventure_movies : [],
favourites_movies : []
}

let movies_reducer = (state = initialState, action) => {
switch (action.type) {

    case ADVENTURE_MOVIES_LOADED: {
        return {
            ...state,
            adventure_movies: action.payload
        }
    }

    case ADD_FILMS_TO_FAVOURITE: {
        return {
            ...state,
            favourites_movies: [...state.favourites_movies, action.payload]
        }
    }

    default:
        return state;
}
}

export default movies_reducer;

Action_types.js

let ADVENTURE_MOVIES_LOADED = 'ADVENTURE_MOVIES_LOADED';
let ADD_FILMS_TO_FAVOURITE = 'ADD_FILMS_TO_FAVOURITE';
export {
ADVENTURE_MOVIES_LOADED,
ADD_FILMS_TO_FAVOURITE
}

Action_creators.js

import {
ADD_FILMS_TO_FAVOURITE,
ADVENTURE_MOVIES_LOADED,
} from "./action_types";

let adventure_movies_are_loaded = (payload) => ({type: ADVENTURE_MOVIES_LOADED, payload});
let add_favourite_movie = (payload) => ({type : ADD_FILMS_TO_FAVOURITE, payload});

export {
adventure_movies_are_loaded,
add_favourite_movie
}

Favourites.js

import React, {useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";

export let Favourites = () => {
let dispatch = useDispatch();
let favourites_movies = useSelector(({movies_reducer : {favourites_movies}}) => favourites_movies

return (<div></div>)
}