Agfdhyk

I am new to React-Redux and i am struggling with a proof-of-concept project (list of movies) in order to learn the basics of redux. I am quite good at React, but Redux is another deal...

So, in my repo and specifically in Smart Component MoviesList.jsx (https://bitbucket.org/vforvaios/react-movie-app/src/05a6241eff3a1896eca91bb1800e8e017f8b569a/src/MoviesList.jsx?at=feature%2Fadd_redux&fileviewer=file-view-default) i am wondering how to dispatch the correct action to change the rating (increment, decrement) in each SingleMovieItem (https://bitbucket.org/vforvaios/react-movie-app/src/05a6241eff3a1896eca91bb1800e8e017f8b569a/src/SingleMovieItem.jsx?at=feature%2Fadd_redux&fileviewer=file-view-default) and what would be the correct reducer to achieve that. Could anyone help me with this?

In other words, to show a real example of what i mean...
Lets say that there is a main App and we make use of the

<Provider store={store}>

  <App />

</Provider>

And then the App contains the following:

import React, { Component } from 'react';

import MoviesList from './MoviesList'



class App extends Component {

   render() {

       return (

          <div>

             <MoviesList />

          </div>

       )

   }

}



export default App;

And then, the MovieList.jsd contains the following:

import React, { Component } from 'react';

import { addRating } from './actions';

import SingleMovieItem from './SingleMovieItem';

import { connect } from "react-redux";



const mapStateToProps = state => {

  return {

    allMovies: state

  };

};



const mapDispatchToProps = (dispatch) => {

  return {

    onIncrement: (id) => dispatch(addRating(id))

  };

};



class MovieList extends Component {

  constructor(props) {

    super(props);

  }



  handleIncrement = id => {



  }



  render() {

     return (

        <div>

           <ul className="moviesList">

              {this.props.allMovies.movies.map(movie => {

                return (

                   <SingleMovieItem

                      key={movie.id}

                      movie={movie}

                      onIncrement={this.handleIncrement(movie.id)} />

                );

              })}

           </ul>

         </div>

       )

     }

   }



   export default connect(mapStateToProps, mapDispatchToProps)(MovieList);

What would be the reducer to increment rating of each singlemovie
if initialState is

const initialState = {

   movies: [

      {

         id: "1",

         title: "Harry Potter 1",

         url: "harry-1.jpg",

         rating: "2"

      },

      {

         id: "2",

         title: "Harry Potter 2",

         url: "harry-2.jpg",

         rating: "3"

      }

    ]

  };

Thanks in advance.