Правильный способ отправки нескольких асинхронных действий в Redux

Question

Мне было интересно, каким будет правильный способ отправки нескольких асинхронных действий схожих типов. У меня есть домашняя страница с четырьмя различными <Thumbnail /> компонентами.

• Компоненты <Thumbnail /> показывают список фильмов. Вроде 1-го покажет Самые рейтинговые фильмы, 2-й покажет фильмы UpComing и так далее. Конечные точки API почти одинаковы, за исключением того, что есть разница в параметрах запроса.
• Я сделал создателя одного действия, поскольку конечные точки почти одинаковы. Что касается диспетчерских действий, я не уверен, должен ли я перебирать список конечных точек и отправлять 4 различных действия?
• Или я должен отправить и только одно действие, и внутри создателя действий я переберу URL-адреса.

Любая помощь будет оценена.

Подход 1

Homepage.js

    componentDidMount() {
      this.categories = [{
        title: "Top Rated Movies",
        url: "movie/top_rated",
      },
      {
        title: "Now Playing",
        url: "movie/now_playing"
      },
      {
        title: "Upcoming Movies",
        url: "movie/upcoming"
      },
      {
       title: "Top Rated TV shows",
       url: "tv/popular",
     }]
     this.categories.forEach(({ url ) => {
       this.props.getFeaturedMovies(url)
     })
    }

Action.js

    export const getFeaturedMovies = (url) => {
      return async (dispatch) => {
        dispatch({ type: REQUEST_ALL_FEATURED_MOVIES })
        fetch(`https://api.themoviedb.org/3/${url}?api_key=${API_KEY}`)
          .then(res => res.json())
          .then(data => dispatch({ type: RECEIVE_ALL_FEATURED_MOVIES, title, payload: data, success: true }))
          .catch(error => {
          dispatch({ type: RECEIVE_ALL_FEATURED_MOVIES, payload: error, success: false })
           })
        }
    };

Подход 2

Homepage.js

    componentDidMount() {
        this.categories = [{
          title: "Top Rated Movies",
          url: "movie/top_rated",
        },
        {
          title: "Now Playing",
          url: "movie/now_playing"
        },
        {
          title: "Upcoming Movies",
          url: "movie/upcoming"
        },
        {
          title: "Top Rated TV shows",
          url: "tv/popular",
        }]
        this.props.getFeaturedMovies(this.categories)
      }

Action.js

    export const getFeaturedMovies = (categories) => {
      return async (dispatch) => {
        dispatch({ type: REQUEST_ALL_FEATURED_MOVIES })
        let featuredMovies = categories.map(async ({ title, url }) => {
          let data = await fetch(`https://api.themoviedb.org/3/${url}?api_key=${API_KEY}`)
          let response = await data.json()
          return {title, data: response.results}
        })
        let featuredMoviesList = await Promise.all(featuredMovies)
        dispatch({ type: RECEIVE_ALL_FEATURED_MOVIES, payload: featuredMoviesList, success: true })
      }
    };

Answer 1

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

Это может измениться в будущем, как только мы получим AsyncMode, но сейчас я бы рекомендовал это.