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 ?