表示されたアイテムリストをドロップダウンメニューセレクタから更新するreact/redux

Question

react/reduxでアイテムのリストをフィルタリングする方法を理解しようとしています。私はこの例に基づいてhttps://jsbin.com/pineyec/edit?html,console,outputを構築しました。questions

数時間後、最終的に私のフィルタコンポーネントが正しく動作しました（私は推測します）。しかし、どのように私のフィルタコンポーネントを私のアイテムリストコンポーネントとリンクさせるべきか、本当に理解していないのです。

私は私の問題の鍵は、次のコードであると思いますが、私は実際にそれを理解していない：

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

は、私は新しいアクションを構築する必要がありますか？または新しい減速器？

次のステップは何ですか？

ありがとうございました。

Answer 1

名前が同じ2つのmapStateToProps関数があるので、常に最後の関数を呼び出しています。

変更

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

const MovieOne = connect(mapStateToProps)(Movies); 

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