Exercise: React Redux part 2 (Movie Input Output)

Idea: Introduction to React-Redux (connect, mapStateToProps, Store and Provider).
Background: https://react-redux.js.org/api/connect and https://react-redux.js.org/using-react-redux/connect-mapstate

In this exercise you have to convert a small plain React App to an App using React-Redux. The App is the wellknown Movie App from the ReactMovieInputOutput exercise.


Step 1 (download the React-App and install the react-redux lib)
Download and unzip: React-movie-input-output-solved.zip Open VSCode and run 'npm install' from your react-redux - directory (if you have made one ;-)) in the Terminal Window.
Navigate to your new project directory and install the React-Redux library locally by running 'npm install --save react react-redux'.

Verify that your initial project is up and running with: 'npm start'.

Step 2 (Actions and Reducers)
Add 2 new folders: 'actions' and 'reducers' and add a new file 'index.js' in each new folder.

Step 3 (Action Creator - selectMovie)
Add a new action creator 'selectMovie' in the folder actions index.js file.
Hint: For inspiration - look at the index.js file from the actions folder in songs.zip

Step 4 (Reducers - moviesReducer and selectMovieReducer)
Add a statement for import of combineReducers from 'redux' and create the reducers moviesReducer( ) (it should return all the MOCK_MOVIES) and selectedMovieReducer(selectedMovie, action) (returns the selected movie). Don't forget to export the combineReducer(....).
Hint: Look at the index.js file from the reducers folder in songs.zip

Step 5 (MovieList)
Update the Component MovieList.
Map the state: movies from the Store to the prop: movies (Hint: use the mapStateToProps fuction). Let the Component import 'selectMovie' from '../actions' and 'connect' from 'react-redux'. Connect mapStateToProps and the reducer selectMovie to the component MovieList and export the connect object.

The MovieList component dosen't need the onMovieSelect(movie) function any more - you can change the onClick( ) so it calls selectedMovie(movie) from the Store instead. Remove MOCK_MOVIES and use the prop movies from the Store instead.
Hint: Look at the Component SongList in songs.zip

Step 6 (MoviePoster and MoviePlot)
Update the Component MoviePoster and MoviePlot.
Map the state: selectedMovie from the Store to the prop: movie. Import 'connect' from 'react-redux'. Connect the mapStateToProps to the Components and export the connect objects.
Hint: Look at the Component SongDetail in songs.zip

Step 7 (Store and Provider)
Update the index.js file.
Import 'Provider' from 'react-redux', 'createStore' from 'redux' and 'reducers' from './reducers'.
Create the Store and wrap the App in a Provider.
Hint: Look at the index.js file in songs.zip

Step 8 (Test)
Test your new React-Redux app.
Revise your 2 Movie apps and notice carefully - what is the difference? -and what is the pro/cons with react-redux vs plain react?

Congratulation! - Yes Redux is amazing! (and so are you!)

/ Henrik H