Exercise: React Redux Toolkit part 2 (Movie)

Idea: Introduction to Redux Toolkit.
Background: https://redux-toolkit.js.org/introduction/getting-started og Usage Guide

I denne opgave skal du konvertere (opgradere) en React-Redux app der benytter den gamle connect( ) function med mapStateToProps.
Appen skal opgraderes så den benytter Redux-Toolkit i stedet for connect( ) og mapStateToProps.

Step 1 (download React-App og kør install)
a) Download og unzip: redux-toolkit-movie-old.zip i din react-redux - mappe (hvis du har lavet en ;-))
b) Åben VSCode og kør 'npm install' fra den nye mappe i Terminal vinduet.
c) Verificer at den gamle app kan køres: 'npm start'.

Step 2 (refaktorer den gamle app til Redux Toolkit)
Bemærk, at mappe strukturen i typiske Redux-toolkit applikationer er lidt anderledes end "gamle" React-Redux applikationer med connect( ) og mapStateToProps mm
Se evt redux-toolkit-counter som inspiration

Hint 1:
Opret en fil MovieSlice.js, der har en initialistate:

const initialState = {
  selectedMovie: null,
  movies: MOCK_MOVIES
};

og en reducer:

reducers: {
    selectMovie: (state, action) => {
      state.selectedMovie = action.payload;
    }
  }

Husk at eksportere reducer samt selector-metoder til at hente staten fra Slicen:

export const { selectMovie } = movieSlice.actions;
export const listOfMovies = (state) => state.movie.movies;
export const clickedMovie = (state) => state.movie.selectedMovie;
export default movieSlice.reducer;

Hint 2:
Lav MovieList om til en function-component og benyt Hook'ene useDispatch og useSelector:

  const dispatch = useDispatch();
  const movielist = useSelector(listOfMovies);

onClick( ) skal kalde dispatch med selectMovie-reduceren og movie som action object:

onClick={() => dispatch(selectMovie(movie))}

Hint 3:
Opret en mappe app, med en fil store.js til at configurere storen:

import { configureStore } from '@reduxjs/toolkit';
import movieReducer from '../components/MovieSlice';

export const store = configureStore({
  reducer: {
    movie: movieReducer,
  },
});

Hint 4:
Lav MoviePlot og MoviePoster om til function-components og benyt useSelector til at hente den valgte movie fra storen (via selector-metoden fra MovieSlice::

const movie = useSelector(clickedMovie);

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

/ Henrik H