javascript - 在 Redux 中调度多个异步操作的正确方法

Question

我想知道分派(dispatch)多个类似类型的异步操作的正确方法是什么。我的主页有四个不同的 <Thumbnail />组件。

• <Thumbnail />组件显示电影列表。就像第一个会显示评分最高的电影，第二名将显示即将上映的电影等。 API 端点几乎相同，只是查询参数有所不同。
• 我制作了一个 Action 创建器，因为端点几乎相同。就调度操作而言，我不确定是否应该遍历端点列表并调度 4 个不同的操作？
• 或者我应该只发送一个 Action ，然后在 Action 创建器中遍历 url。

任何帮助将不胜感激。

方法一

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 })
           })
        }
    };

方法二

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，这在未来可能会有所不同，但现在我建议这样做。