Пример фильтрации поиска на react redux

109
18 февраля 2022, 11:00

Нужна помощь в объяснении подобного поиска (не обязательно код, а по шагам, как лучше сделать). Без каких-либо готовых решений/плагинов

После ввода данных в поля, нажимаем на кнопку "применить" и введенные данные отображаются через запятую в поиске наверху: Пример кода https://codesandbox.io/s/forms-tutorial-zuy1f

Сложно понять как реализовать на redux:

  1. Должны ли быть у reducer'а фильтра начальные состояния с пустыми значениями?
  2. Как лучше отследить изменения в текстовых полях
Answer 1

Тебе нужно создать action для каждого инпута, если планируется, что все эти инпуты - это все инпуты с такой бизнес-логикой во всем приложении. Ловишь события onKeyDown и отправляешь в redux стейт, а из стейта читаешь данные в value - всё будет обновляться. Когда создаешь store указываешь все значения пустой строкой, чтобы не было ошибки в React компоненте. Можно сделать без локального стейта компонента. К кнопке привязываешь функцию onClick, которая просто заменит location.href; Через запятую это функция [1,2,3].join();

export default ({setДиагональ, диагональ и т.д.}) => {
  <input onKeyDown={setДиагональ} value={диагональ}> и т.д.
}

Применить

const apply = () => [диагональ, тип, вес, производитель].join()
READ ALSO
Как удалить пробелы перед текстом

Как удалить пробелы перед текстом

Нужно пройтись по массиву translates и удалить все пробелы перед началом текста или если в тесте одни пробелы то удалить их все и чтобы была просто...

99
decimal to bin странно работает

decimal to bin странно работает

мучался, мучался, родил этот кодесли убрать условие в главной функции(не рекурсии), то после цифры 16 конвертер работает некорректно(его нужно...

95
Выделение активного якоря с половины высоты экрана

Выделение активного якоря с половины высоты экрана

В данном примере выделение активного якоря активируется когда секция располагается по верхнему краю экранаА как можно сделать, чтобы якорь...

239