useEffect Крюк, не включающий в себя функцию стрельбы

Question

У меня есть следующий компонент в моем приложенииactjs:

import React, { useEffect } from 'react';
import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';    
import MovieList from '../components/MovieList';
import styled from 'styled-components';
import { getMoviesDiscover} from '../actions';


const Wrapper = styled.div`
    display: flex;
    width:100%;
    flex-direction: column;
`;


const Discover = ({
    geral,
    movies
}) => {

    const query = 'popular';

    useEffect( () => {
        getMoviesDiscover( query );
    } , [] );

    if( movies.loading ) {
        return (
            <div>
                Movies are loading..
            </div>
        )
    }

    return (
        <Wrapper>
            <Helmet>
                <title>Danm Gurl</title>
            </Helmet>
            <MovieList 
                movies={ movies }    
            />
            <MovieList 
                movies={ movies }    
            />
        </Wrapper>
    )

}

const mapStateToProps = ({ geral, movies }) => {
    return { geral, movies };
};

export default connect(
    mapStateToProps,
    { getMoviesDiscover }
)(Discover);

Как вы можете видеть, я использую React Hook useEffect следующим образом: -

useEffect( () => {
            getMoviesDiscover( query );
} , [] );

Проблема в том,если я добавляю console.log внутри useEffect, я вижу console.log в консоли.Но функция getMoviesDiscover никогда не выполняется.Функция getMoviesDiscover находится во внешнем файле и выглядит следующим образом:

export const getMoviesDiscover = ( name , page ) => async ( dispatch , getState ) => {
    console.log('OK !')
    dispatch({ type : 'FETCH_MOVIES_LOADING' })
    const res = await tmdbAPI.get(`https://api.themoviedb.org/3/movie/${name}?api_key=<MY_API_KEY>` , {
        params: {
            page
        }
    });
    await dispatch({
        type: 'FETCH_MOVIES_DISCOVER',
        payload: res.data
    });
    dispatch({ type : 'FETCH_MOVIES_FINISHED' })
}

Почему мой хук useEffect не вызывает функцию?

Answer 1

Итак, сейчас происходит то, что импортированная (thunk) функция getMoviesDiscover из '../actions' вызывается напрямую, а не та, которая была передана в mapDispatchToProps.Таким образом, вам нужно будет деструктурировать эту функцию в ваших реквизитах, например, ({ geral, movies, getMoviesDiscover }) => {

Возможно, вам также потребуется выполнить getMoviesDiscover as myNewFuncName, чтобы избежать ошибок теневых переменных