refactored reducers

src/components/MainContent.js

@@ -7,7 +7,7 @@ import Footer from './Footer'
 import DisplayMovieRow from './DisplayMovieRow'
 
 const MainContent = ({ selectMovieHandler }) => {
-  const headerMovie = useSelector((state) => state.headerMovie)
+  const { movieDetails } = useSelector((state) => state.movieDetails)
   const netflixOriginals = useSelector((state) => state.netflixOriginals)
   const trending = useSelector((state) => state.trending)
   const topRated = useSelector((state) => state.topRated)
@@ -20,7 +20,7 @@ const MainContent = ({ selectMovieHandler }) => {
   const dispatch = useDispatch()
 
   useEffect(() => {
-    dispatch(movieActions.fetchHeaderMovie())
+    dispatch(movieActions.fetchMovieDetails('tv', '63351'))
     dispatch(movieActions.fetchNetflixOriginals())
     dispatch(movieActions.fetchTrending())
     dispatch(movieActions.fetchTopRated())
@@ -33,7 +33,7 @@ const MainContent = ({ selectMovieHandler }) => {
 
   return (
     <div className='container'>
-      <Header movie={headerMovie} />
+      <Header movie={movieDetails} />
       <div className='movieShowcase'>
         <DisplayMovieRow
           isNetflixMovies={true}

src/components/Movie.js

@@ -1,11 +0,0 @@
-import React from 'react'
-
-const Movie = ({ movieDetails, movieImage }) => (
-  <div className='movie'>
-    <div onClick={movieDetails} className='movie__column-poster'>
-      <img src={movieImage} alt='' className='movie__poster' />
-    </div>
-  </div>
-)
-
-export default Movie

src/pages/Search.js

@@ -6,7 +6,6 @@ import { useDebounce } from '../hooks/useDebounce'
 import * as movieActions from '../store/actions'
 import Modal from '../components/UI/Modal'
 import ModalMovieDetails from '../components/ModalMovieDetails'
-import Movie from '../components/Movie'
 
 // A custom hook that builds on useLocation to parse
 // the query string for you.
@@ -46,12 +45,14 @@ const Search = () => {
               const movieImageUrl =
                 'https://image.tmdb.org/t/p/w500' + movie.poster_path
               return (
-                <Movie
+                <div className='movie'>
-                  movieDetails={() => onSelectMovieHandler(movie)}
+                  <div
-                  key={movie.id}
+                    onClick={() => onSelectMovieHandler(movie)}
-                  movieImage={movieImageUrl}
+                    className='movie__column-poster'
-                  movie={movie}
+                  >
-                />
+                    <img src={movieImageUrl} alt='' className='movie__poster' />
+                  </div>
+                </div>
               )
             }
           })}

src/store/actions/index.js

@@ -1,6 +1,5 @@
 import axios from '../../axios-movies'
 
-export const FETCH_HEADER_MOVIE = 'FETCH_HEADER_MOVIE'
 export const FETCH_TRENDING = 'FETCH_TRENDING'
 export const FETCH_NETFLIX_ORIGINALS = 'FETCH_NETFLIX_ORIGINALS'
 export const FETCH_TOP_RATED = 'FETCH_TOP_RATED'
@@ -57,21 +56,6 @@ export const fetchSearchMovie = (searchTerm) => {
   }
 }
 
-export const fetchHeaderMovie = () => {
-  const movieId = 63351
-  return async (dispatch) => {
-    try {
-      const request = await axios.get(
-        `tv/${movieId}?api_key=${process.env.API_KEY}`
-      )
-
-      dispatch({ type: FETCH_HEADER_MOVIE, payload: request })
-    } catch (error) {
-      console.log('error', error)
-    }
-  }
-}
-
 export const fetchNetflixOriginals = () => {
   return async (dispatch) => {
     try {

src/store/reducers/index.js

@@ -7,7 +7,6 @@ import ComedyMoviesReducer from './reducerComedyMovies'
 import HorrorMoviesReducer from './reducerHorrorMovies'
 import RomanceMoviesReducer from './reducerRomanceMovies'
 import DocumentaryReducer from './reducerDocumentary'
-import HeaderMovieReducer from './reducerHeaderMovie'
 import SearchMovieReducer from './reducerSearchMovie'
 import MovieDetailsReducer from './reducerMovieDetails'
 
@@ -20,7 +19,6 @@ const rootReducer = combineReducers({
   horror: HorrorMoviesReducer,
   romance: RomanceMoviesReducer,
   documentary: DocumentaryReducer,
-  headerMovie: HeaderMovieReducer,
   searchMovie: SearchMovieReducer,
   movieDetails: MovieDetailsReducer,
 })

src/store/reducers/reducerHeaderMovie.js

@@ -1,11 +0,0 @@
-import { FETCH_HEADER_MOVIE } from '../actions/index'
-
-export default function (state = {}, action) {
-  switch (action.type) {
-    case FETCH_HEADER_MOVIE:
-      const data = action.payload.data
-      return { ...state, ...data }
-    default:
-      return state
-  }
-}