refactored action creators

src/components/MainContent.js

@@ -11,6 +11,12 @@ const MainContent = ({ selectMovieHandler }) => {
   const headerMovie = useSelector((state) => state.headerMovie)
   const netflixOriginals = useSelector((state) => state.netflixOriginals)
   const trending = useSelector((state) => state.trending)
+  const topRated = useSelector((state) => state.topRated)
+  const actionMovies = useSelector((state) => state.action)
+  const comedyMovies= useSelector((state) => state.comedy)
+  const horrorMovies = useSelector((state) => state.horror)
+  const romanceMovies = useSelector((state) => state.romance)
+  const documentaries = useSelector((state) => state.documentary)
 
   const dispatch = useDispatch()
 
@@ -18,6 +24,12 @@ const MainContent = ({ selectMovieHandler }) => {
     dispatch(movieActions.fetchHeaderMovie())
     dispatch(movieActions.fetchNetflixOriginals())
     dispatch(movieActions.fetchTrending())
+    dispatch(movieActions.fetchTopRated())
+    dispatch(movieActions.fetchActionMovies())
+    dispatch(movieActions.fetchComedyMovies())
+    dispatch(movieActions.fetchHorrorMovies())
+    dispatch(movieActions.fetchRomanceMovies())
+    dispatch(movieActions.fetchDocumentaries())
   }, [dispatch])
 
   return (
@@ -35,6 +47,36 @@ const MainContent = ({ selectMovieHandler }) => {
           selectMovieHandler={selectMovieHandler}
           movies={trending.data}
         />
+        <DisplayMovieRow
+          title='Top Rated'
+          selectMovieHandler={selectMovieHandler}
+          movies={topRated.data}
+        />
+        <DisplayMovieRow
+          title='Action Movies'
+          selectMovieHandler={selectMovieHandler}
+          movies={actionMovies.data}
+        />
+        <DisplayMovieRow
+          title='Comedy'
+          selectMovieHandler={selectMovieHandler}
+          movies={comedyMovies.data}
+        />
+        <DisplayMovieRow
+          title='Horror Movies'
+          selectMovieHandler={selectMovieHandler}
+          movies={horrorMovies.data}
+        />
+        <DisplayMovieRow
+          title='Romance'
+          selectMovieHandler={selectMovieHandler}
+          movies={romanceMovies.data}
+        />
+        <DisplayMovieRow
+          title='Documentaries'
+          selectMovieHandler={selectMovieHandler}
+          movies={documentaries.data}
+        />
       </div>
       <Footer />
     </div>

src/store/actions/index.js

@@ -51,67 +51,69 @@ export const fetchTrending = () => {
 }
 
 export const fetchTopRated = () => {
-  const request = axios.get(
-    `/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`
-  )
-
-  return {
-    type: FETCH_TOP_RATED,
-    payload: request,
+  return async (dispatch) => {
+    try {
+      const request = await axios.get(
+        `/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`
+      )
+      dispatch({ type: FETCH_TOP_RATED, payload: request })
+    } catch (error) {}
   }
 }
 
 export const fetchActionMovies = () => {
-  const request = axios.get(
-    `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`
-  )
+  return async (dispatch) => {
+    try {
+      const request = await axios.get(
+        `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`
+      )
 
-  return {
-    type: FETCH_ACTION_MOVIES,
-    payload: request,
+      dispatch({ type: FETCH_ACTION_MOVIES, payload: request })
+    } catch (error) {}
   }
 }
 
 export const fetchComedyMovies = () => {
-  const request = axios.get(
-    `/discover/movie?api_key=${process.env.API_KEY}&with_genres=35`
-  )
+  return async (dispatch) => {
+    try {
+      const request = await axios.get(
+        `/discover/movie?api_key=${process.env.API_KEY}&with_genres=35`
+      )
 
-  return {
-    type: FETCH_COMEDY_MOVIES,
-    payload: request,
+      dispatch({ type: FETCH_COMEDY_MOVIES, payload: request })
+    } catch (error) {}
   }
 }
 
 export const fetchHorrorMovies = () => {
-  const request = axios.get(
-    `/discover/movie?api_key=${process.env.API_KEY}&with_genres=27`
-  )
-
-  return {
-    type: FETCH_HORROR_MOVIES,
-    payload: request,
+  return async (dispatch) => {
+    try {
+      const request = await axios.get(
+        `/discover/movie?api_key=${process.env.API_KEY}&with_genres=27`
+      )
+      dispatch({ type: FETCH_HORROR_MOVIES, payload: request })
+    } catch (error) {}
   }
 }
 
 export const fetchRomanceMovies = () => {
-  const request = axios.get(
-    `/discover/movie?api_key=${process.env.API_KEY}&with_genres=10749`
-  )
-
-  return {
-    type: FETCH_ROMANCE_MOVIES,
-    payload: request,
+  return async (dispatch) => {
+    try {
+      const request = await axios.get(
+        `/discover/movie?api_key=${process.env.API_KEY}&with_genres=10749`
+      )
+      dispatch({ type: FETCH_ROMANCE_MOVIES, payload: request })
+    } catch (error) {}
   }
 }
 
 export const fetchDocumentaries = () => {
-  const request = axios.get(
-    `/discover/movie?api_key=${process.env.API_KEY}&with_genres=99`
-  )
-
-  return {
-    type: FETCH_DOCUMENTARIES,
-    payload: request,
+  return async (dispatch) => {
+    try {
+      const request = await axios.get(
+        `/discover/movie?api_key=${process.env.API_KEY}&with_genres=99`
+      )
+      dispatch({ type: FETCH_DOCUMENTARIES, payload: request })
+    } catch (error) {}
   }
 }