CODEWITHSUNDEEP
reactjsredux
Simon Breton
Simon Breton

Reputation: 2876

Updating displayed Item list from dropdown menu selector react/redux

I'm trying to understand how to filter a list of items with react/redux. I've build this example https://jsbin.com/pineyec/edit?html,console,output based on this questions

After few hours and some help I finally have my filter components working correctly (I guess). However how don't really understand how I should link my filter components with my item list components.

I guess the key of my problem is in the following code but I don't really understand it : 

// Getting visible movies from state.
function getVisibleMovies(year, genre, rating, sorting, movies) {
  return movies
    .filter(m => {
      return (
        (year == 'all' || year == m.year) &&
        (genre == 'all' || genre == m.genre) &&
        (rating == 'all' || rating == m.rating)
      );
    })
    .sort((a, b) => {
      if (sorting == 'year') {
        return b.year - a.year;
      }
      if (sorting == 'rating') {
        return b.rating - a.rating;
      }
      if (sorting == 'alphabetically') {
        return a.title > b.title ? 1 : a.title < b.title ? -1 : 0;
      }
    });
}

Do I need to build new actions ? Or new reducer ?

What's should be my next step ?

thanks.

Upvotes: 0

Views: 686

Answers (1)

QoP
QoP

Reputation: 28397

You got two mapStateToProps functions with the same name, so you are always calling the last one.

Change

function mapStateToProps(state) {
          return {
            movies: state.moviesReducer.movies,
          };
        }

const MovieOne = connect(mapStateToProps)(Movies);

to

 function mapStateToPropsMovies(state) {
      let {year,genre,rating,sorting,movies} =  state.moviesReducer;
      return {
        movies:  getVisibleMovies(year, genre, rating, sorting, movies)
      };
 }


 const MovieOne = connect(mapStateToPropsMovies)(Movies);

jsbin working

Upvotes: 1

Related Questions