Как переделать компонент Search в semantic-ui-react на Redux?

Question

[Леонид Марков]

Есть задача - реализовать поиск по .json файлу с использованием библиотеки semantic-ui-react, а именно - ее компонента Search с использованием Redux. В официальной документации есть пример такой реализации, но лишь на ReactJS, без Redux. Может кто в курсе, что и как там переделать, чтобы на Redux заработало?
Вот ссылочка на пример в sandbox https://codesandbox.io/s/my1n2v6j78?module=/example.js
Заранее спасибо огромное!

Answer 1

[Антон Спирин]

Вам надо в колбеке onSearchChange менять состояние фильтра. А хранить фильтр можно хоть в состоянии компонента. Пример:

handleSearchChange = (e, { value }) => {
  this.setState({ filter: value });
};

Массив results, в вашем случае, будет содержать полученные из хранилища и обработанные фильтром данные.

const results = data.filter(item => item.title.toLowerCase().includes(filter.toLowerCase()));

Comments

[Леонид Марков]

С праздником Пасхи вас!
А по примеру - понятно, что НИЧЕГО НЕ ПОНЯТНО. .. А где тут Redux? Вы просто слегка упростили исходный вариант, а как тут задействовать редьюсеры и экшены - непонятно. Вот я набросал свой пример на основе исходника. Могли бы вы там, на sandbox, набросать ваш вариант работы не с faker-ом, а с моим файлом clients.json (создать свой форк моего примера)? Вот ссылочка на мой вариант https://codesandbox.io/s/mj7w9klz7j
Просто хотелось бы получить чисто REDUX-версию данного примера

[Антон Спирин]

Леонид Марков, в том то и дело, что в вашем случае задача гораздо проще. Вам с json можно вообще не использовать редьюсеры и экшены. Все происходит в рамках компонента.
Но если хотите фильтровать отдельный список и использовать redux, то просто вынесите туда состояние фильтра:

handleSearchChange = (e, { value }) => {
  this.props.dispatch(setFilter(value));
};

Для фильтрованных данных надо написать селектор:

import { createSelector } from 'reselect';

export const filterSelector = state => state.filter;
export const dataSelector = state => state.data;

export const filteredDataSelector = createSelector(
  [dataSelector, filterSelector],
  (data, filter) => data.filter(item => item.title.toLowerCase().includes(filter.toLowerCase())),
);

И в любом компоненте где надо выводить фильтрованный список подключаете данные в mapStateToProps:

const mapStateToProps = state => ({
  filteredData: filteredDataSelector(state),
})

В случае если будете хранить фильтр в store надо в нужный момент его обнулять.

[Леонид Марков]

Антон Спирин, А можно все это показать на действующем примере, в sandbox? А то вы тут применили библиотеку reselect, а я с ней пока что не разобрался. Я вставил то, что вы тут написали в свой пример, только вот ничего не работает. Вроде и все зависимости стоят и импорт прописан, а выбивает ошибки

[Антон Спирин]

Леонид Марков, с reselect все просто. В моем примере он забирает данные из такой структуры store:

{
  data: [],
  filter: '',
};

У вас структура скорей всего будет сложней.

Ошибки у вас потому, что вы вставили мой пример в тело класса. Синтаксис JavaScript такого не позволяет. Так же у вас потерялась одна скобочка в конце строки:

(data, filter) => data.filter(item => item.title.toLowerCase().includes(filter.toLowerCase())),

Простой пример с демонстрацией принципа решения задачи.

Как видите, для решения задачи не обязательно выносить состояние фильтра в redux. А если его вынести, то принцип решения останется прежним.