从下拉菜单选择器 react/redux 更新显示的项目列表

Question

我正在尝试了解如何使用 react/redux 过滤项目列表。我已经基于这个questions 构建了这个例子https://jsbin.com/pineyec/edit?html,console,output

经过几个小时和一些帮助，我终于让我的过滤器组件正常工作（我猜）。但是，我真的不明白我应该如何将我的过滤器组件与我的项目列表组件链接起来。

我猜我的问题的关键在于下面的代码，但我不太明白：

// 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

你有两个同名的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