В этой статье блога мы рассмотрим различные методы фильтрации контейнера списка фильмов с помощью Redux. Фильтрация позволяет пользователям искать и сужать отображаемые фильмы по определенным критериям. Мы рассмотрим несколько подходов и предоставим примеры кода для каждого метода.

Метод 1: использование метода Array.filter()
Метод Array.filter() — это встроенная функция JavaScript, которая создает новый массив с элементами, которые соответствуют заданному условию фильтрации. Мы можем использовать этот метод для фильтрации нашего контейнера со списком фильмов по определенным критериям.

const filteredMovies = movies.filter(movie => movie.genre === 'Action');

Метод 2: создание действия фильтрации в Redux
В настройке Redux мы можем создать действие фильтрации, которое отправляет определенное значение фильтра в хранилище Redux. Это значение фильтра затем можно использовать для обновления контейнера списка фильмов.

// Redux action
const filterMovies = (genre) => {
  return {
    type: 'FILTER_MOVIES',
    payload: genre
  };
};
// Redux reducer
const moviesReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FILTER_MOVIES':
      return {
        ...state,
        filteredMovies: state.movies.filter(movie => movie.genre === action.payload)
      };
    default:
      return state;
  }
};

Метод 3: реализация поиска с устранением дребезга
Поиск с устранением дребезга задерживает выполнение действия фильтрации до тех пор, пока пользователь не закончит печатать. Такой подход может повысить производительность за счет сокращения ненужных действий фильтра, вызываемых быстрым нажатием клавиш.

import { debounce } from 'lodash';
const debouncedFilterMovies = debounce((searchText) => {
  dispatch(filterMovies(searchText));
}, 300);
const handleSearchChange = (event) => {
  const searchText = event.target.value;
  debouncedFilterMovies(searchText);
};
// JSX code
<input type="text" onChange={handleSearchChange} placeholder="Search movies" />

Метод 4: использование селекторов с библиотекой Reselect
Библиотека Reselect предоставляет удобный способ создания запоминаемых селекторов в Redux. Селекторы могут вычислять производные данные из состояния Redux, что позволяет эффективно фильтровать наш контейнер списка фильмов.

import { createSelector } from 'reselect';
const getMovies = state => state.movies;
const getFilter = state => state.filter;
const getFilteredMovies = createSelector(
  [getMovies, getFilter],
  (movies, filter) => {
    return movies.filter(movie => movie.genre === filter);
  }
);

В этой статье мы рассмотрели различные методы фильтрации контейнера со списком фильмов с помощью Redux. Мы рассмотрели использование метода Array.filter(), создание действия фильтрации в Redux, реализацию поиска с устранением дребезга и использование селекторов с библиотекой Reselect. Каждый метод предлагает свои преимущества и может быть адаптирован к конкретным требованиям применения. Используя эти методы, вы можете предоставить пользователям возможность удобной и эффективной фильтрации фильмов.