如何在Redux中过滤和排序对象状态的相同数组？

Question

我正在使用电影收藏应用程序，其中有一个包含电影列表的页面。我想添加基于年份，类型和等级过滤电影的功能，并且我想按字母，年份和等级对它进行排序。我如何通过使用redux来完成该任务以及如何通过使用单个状态对象来做出反应。

Answer 1

首先，我们应该创建组件以显示电影列表。
注意，这是一个纯粹的无状态组件，我们不在那里进行排序或过滤，而只是渲染派生的道具：

// Movies.js

import React from 'react';

function Movies({ movies }) {
  return (
    <ul>
      {movies.map((m, i) =>
        <li key={i}>{m.year} - {m.title}.({m.genre}) - {m.rating}</li>
      )}
    </ul>
  );
}

export default Movies;

接下来，我们将创建另一个无状态组件，该组件将包含排序和过滤器视图。
这里我们还渲染道具，并提供select元素的回调：

// Pane.js

import React from 'react';

function Pane({
  selectedYear,
  selectedGenre,
  selectedRating,
  years = [],
  genres = [],
  ratings = [],
  sorting,
  onYearChange,
  onGenreChange,
  onRatingChange,
  onSortingChange,
}) {
  return (
    <div>
      <div>
        Filters:
        <div>
          Year:
          <select
            defaultValue={selectedYear}
            onChange={e => onYearChange(e.target.value)}
          >
            <option value="all" >All</option>
            {years.map((y, i) =>
              <option key={i} value={y}>{y}</option>
            )}
          </select>
        </div>
        <div>
          Genre:
          <select
            defaultValue={selectedGenre}
            onChange={e => onGenreChange(e.target.value)}
          >
            <option value="all" >All</option>
            {genres.map((g, i) =>
              <option key={i} value={g}>{g}</option>
            )}
          </select>
        </div>
        <div>
          Rating:
          <select
            defaultValue={selectedRating}
            onChange={e => onRatingChange(e.target.value)}
          >
            <option value="all" >All</option>
            {ratings.map((r, i) =>
              <option key={i} value={r}>{r}</option>
            )}
          </select>
        </div>
      </div>
      <div>
        Select sorting:
        <select
          defaultValue={sorting}
          onChange={e => onSortingChange(e.target.value)}
        >
          <option value="alphabetically">Alphabetically</option>
          <option value="year">Year</option>
          <option value="rating">Rating</option>
        </select>
      </div>
    </div>
  );
}

export default Pane;

我们将在应用程序状态下存储电影以及所有过滤和排序数据。我们需要创建reducer来处理排序和过滤操作：

// reducers.js

const items = [{
  title: 'Mad max',
  year: 2015,
  rating: 8,
  genre: 'fantasy',
}, {
  title: 'Spider man 2',
  year: 2014,
  rating: 7,
  genre: 'fantasy',
}, {
  title: 'Iron man 3',
  year: 2013,
  rating: 7,
  genre: 'fantasy',
}, {
  title: 'Dumb and Dumber To',
  year: 2014,
  rating: 5,
  genre: 'comedy',
}, {
  title: 'Ted 2',
  year: 2015,
  rating: 6,
  genre: 'comedy',
}];

export default function moviesReducer(state = {
  movies: items,
  year: 'all',
  rating: 'all',
  genre: 'all',
  sorting: 'year',
}, action) {
  switch (action.type) {
    case 'SET_YEAR':
      return {
        ...state,
        year: action.year,
      };
    case 'SET_RATING':
      return {
        ...state,
        rating: action.rating,
      };
    case 'SET_GENRE':
      return {
        ...state,
        genre: action.genre,
      };
    case 'SET_SORTING':
      return {
        ...state,
        sorting: action.sorting,
      };
    default:
      return state;
  }
}

要向无状态组件提供数据，我们应该使用containers。
让我们创建PaneContainer以提供对Pane组件的排序和过滤数据：

// PaneContainer.js

import { connect } from 'react-redux';
import Pane from './Pane';

// Simple helper function, which return all filters from state by given key.
function getFilters(key, movies) {
  return movies.reduce((acc, movie) => {
    if (!acc.includes(movie[key])) {
      return [...acc, movie[key]];
    }
    return acc;
  }, []);
}

function mapStateToProps(state, props) {
  const { sorting, year, genre, rating } = state;
  return {
    selectedYear: year,
    selectedGenre: genre,
    selectedRating: rating,
    years: getFilters('year', state.movies),
    genres: getFilters('genre', state.movies),
    ratings: getFilters('rating', state.movies),
    sorting,
  };
}

function mapDispatchToProps(dispatch, props) {
  return {
    // Here, we are providing callbacks with dispatching functions.
    onYearChange(year) {
      dispatch({
        type: 'SET_YEAR',
        year,
      });
    },
    onGenreChange(genre) {
      dispatch({
        type: 'SET_GENRE',
        genre,
      });
    },
    onRatingChange(rating) {
      dispatch({
        type: 'SET_RATING',
        rating,
      });
    },
    onSortingChange(sorting) {
      dispatch({
        type: 'SET_SORTING',
        sorting,
      });
    },
  };
}

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

最后，我们将创建MoviesContainer为Movies组件提供可见电影的组件：

// MoviesContainer.js

import { connect } from 'react-redux';
import Movies from './Movies';

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

function mapStateToProps(state) {
  const { year, genre, rating, sorting, movies } = state;
  return {
    movies: getVisibleMovies(year, genre, rating, sorting, movies),
  };
}

export default connect(mapStateToProps)(Movies);