0

As the title suggests, I'm trying to dispatch multiple actions from the same component's componentDidMount hook.

MovieDetails.js

class MovieDetails extends Component {
  componentDidMount() {
    const movieId = this.props.movieId
    this.props.dispatch(fetchMovieDetails(movieId))
    this.props.dispatch(fetchMovieImages(movieId))
    this.props.dispatch(fetchMovieActors(movieId))
  }

All the actions are quite similar. Here's an example of one.

export const fetchMovieActors = movieId => {

  const movieActorsUrl = `https://api.themoviedb.org/3/${movieId}/475557/credits?api_key=${apiKey}`

  return async dispatch => {
    dispatch({ type: "FETCHING_MOVIE_ACTORS_START" })
    try {
      const res = await axios.get(movieActorsUrl)
      console.log(res)
      dispatch({
        type: "FETCHING_MOVIE_ACTORS_SUCCESS",
        data: { movieActors: res.data }
      })
    } catch (err) {
      dispatch({
        type: "FETCHING_MOVIE_ACTORS_FAILURE",
        error: { error: "Something went wrong" }
      })
    }
  }
}

I'm just asking is this the correct way of doing this ?

hellraiser999
  • 91
  • 2
  • 13

0 Answers0