Повторное использование функции среди нескольких компонентов в React

Question

В настоящее время я использую одну и ту же функцию в нескольких компонентах в своем собственном приложении, и мне бы хотелось, чтобы она перемещалась в отдельный компонент, который вызывался каждый раз, когда это необходимо.

Я знаю, как повторно использовать общие компоненты, которые принимают реквизиты и возвращают что-то для рендеринга, но я борюсь с чистыми функциями.

Это моя функция, которая выполняет серию вызовов API и, наконец, переходит на другой экран.

const fetchMovieHandler = (movieId, movieTitle) => {
    function fetchData() {
      dispatch(movieMainActions.fetchMovie(movieId)).then((response) => {
        dispatch(movieCastActions.fetchCast(movieId)).then((response) => {
          dispatch(movieReviewsActions.fetchReviews(movieId)).then((response) => {              
              dispatch(movieSimilarActions.fetchSimilar(movieId)).then((response) => {
                  dispatch(movieRecommendActions.fetchRecommendations(movieId)).then((response) => {
                    props.navigation.navigate({
                        routeName: "MovieDetail",
                        params: {
                          assetId: movieId,
                          assetName: movieTitle,
                        },
                    });
                  });
              });
            });
        });
      });       
    }
    fetchData();
  };