Aktualisierung der angezeigten Artikelliste aus der Dropdown-Menüauswahl react/redux

Question

Ich versuche zu verstehen, wie man eine Liste von Artikeln mit react/redux filtert. Ich habe dieses Beispiel https://jsbin.com/pineyec/edit?html,console,output basierend auf diesem questions

bauen Nach ein paar Stunden und etwas Hilfe habe ich endlich meine Filterkomponenten richtig funktionieren (ich denke). Allerdings verstehe ich nicht wirklich, wie ich meine Filterkomponenten mit meinen Artikellisten-Komponenten verknüpfen soll.

Ich denke, der Schlüssel meines Problems in dem folgenden Code, aber ich verstehe es nicht wirklich:

// 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; 
     } 
    }); 
} 

Muss ich neue Aktionen bauen müssen? Oder neuer Reduzierer?

Was sollte mein nächster Schritt sein?

danke.

Answer 1

Sie haben zwei mapStateToProps Funktionen mit dem gleichen Namen, so dass Sie immer die letzte anrufen.

ändern

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

const MovieOne = connect(mapStateToProps)(Movies); 

zu

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