Finished MVP

src/components/Movie.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useParams, useHistory } from 'react-router-dom';
+import {connect} from 'react-redux'
 
 const Movie = (props) => {
     const { id } = useParams();
@@ -47,4 +48,6 @@ const Movie = (props) => {
     </div>);
 }
 
-export default Movie;
+
+
+export default connect(maptoStatetoProps, {})(Movie);

src/components/MovieHeader.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 const MovieHeader = (props) => {
@@ -19,4 +20,10 @@ const MovieHeader = (props) => {
     </div>);
 }
 
-export default MovieHeader;
+const mapTitletoProps = state => {
+    return {
+        appTitle: state.appTitle
+    }
+}
+
+export default connect(mapTitletoProps, {})(MovieHeader);

src/components/MovieList.js

@@ -1,5 +1,5 @@
 import React from 'react';
-
+import {connect} from 'react-redux'
 import MovieListItem from './MovieListItem';
 import MovieFooter from './MovieFooter';
 
@@ -21,7 +21,7 @@ const MovieList = (props)=> {
 
                 <tbody>
                     {
-                        movies.map(movie=><MovieListItem key={movie.id} movie={movie}/>)
+                        props.movies.map(movie=><MovieListItem key={movie.id} movie={movie}/>)
                     }
                 </tbody>
             </table>
@@ -31,4 +31,10 @@ const MovieList = (props)=> {
     );
 }
 
-export default MovieList;
+export const mapStatetoProps = state => {
+    return {
+        movies: state.movies,
+    }
+}
+
+export default connect(mapStatetoProps, {})(MovieList);

src/index.js

@@ -9,9 +9,13 @@ import App from './App'
 import { BrowserRouter as Router } from 'react-router-dom';
 import './index.css';
 
+const store = createStore(reducer);
+
 ReactDOM.render(
   <Router>
-      <App />
+    <Provider store={store}>
+    <App />
+    </Provider>      
   </Router>,
   document.getElementById('root')
-);
+);

src/reducers/favoriteReducer.js

@@ -0,0 +1,18 @@
+import movies from "../data";
+
+export const initialFavoriteState = {
+    favorites: movies,
+    displayFavorites: false,
+} 
+
+const favoriteReducer = (state, action) => {
+    switch(action.type) {
+        case (FAVORITE_MOVIE):
+            return({
+                ...state,
+                displayFavorites: !state.displayFavorites
+            })
+    }
+}
+
+export default favoriteReducer;

src/reducers/index.js

@@ -2,4 +2,7 @@ import { combineReducers } from 'redux';
 
 import movieReducer from './movieReducer';
 
+import favoriteReducer from './favoriteReducer';
+
+rootReducer = combineReducers({movie: movieReducer, favorite: favoriteReducer})
 export default movieReducer;

src/reducers/movieReducer.js

@@ -1,7 +1,7 @@
 import { ADD_MOVIE, DELETE_MOVIE } from '../actions/movieActions.js';
 import movies from './../data.js';
 
-const initialState = {
+export const initialState = {
     movies: movies,
     appTitle: "IMDB Movie Database"
 }
@@ -12,6 +12,10 @@ const reducer = (state, action) => {
             return {
                 movies: state.movies.filter(item=>(action.payload !== item.id))
             }
+            case ADD_MOVIE:
+                return {
+                    movies: state.movies.filter(item=>(action.payload === item.id))
+                }
         default:
             return state;
     }