Как реализировать подобный функционал на react + REDUX?

Question

[Vanya Huk]

Вот ссылка примера, auto.ria.ua
ника не пойму как правильно реализировать подобное

суть следующая - по клике на фильтр появляеться новый блок с текстом и меняеться урл.
Как можно грамотно реализировать подобный функционал на реакте?

Answer 1

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

В самом простом варианте.
1. При загрузке приложения по опеределеному роуту, разбирать query string на составляющие и по ним делать запрос к API и рендерить состояние фильтров.
2. По клику на фильтр, обновление его состояния и push нового location с query string, собранной по новому состоянию фильтра.

Comments

[Vanya Huk]

Антон Спирин : как вартант, но кроме самих значений нужно еще текст брать, например чтоб писало “год от 1998”

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

Vanya Huk, и в чем проблема добавить в query string параметры yearTo и yearFrom?

[Vanya Huk]

Антон Спирин : значение будет yearFrom=1993, но в красные блоки нужно писать иной текст, вот, кликните на ссылку и вы поймете
Как бы получаеться
value:1993,
label: год от 1993

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

Vanya Huk, в чем проблема отрендерить блок с нужным текстом по данным?)

if (yearFrom) {
  badges.push({ 
    name: 'yearFrom',
    value: yearFrom',
    label: `год от ${yearFrom}`, 
  });
}

Это абстрактное решение навскидку. Реализовать подобное безграничное множество способов.

[Vanya Huk]

Антон Спирин: а есле ксть вложенные свойства?

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

Vanya Huk, не совсем вас понимаю. Приведите пример.

[Vanya Huk]

Антон Спирин, filter_models : {

yearFrom : 1993,

bodies: [2,3,4]

}

Такого формата

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

Vanya Huk, и в чем проблема с этим примером?) не знаете как наличие элементов массива проверить или видите проблему в чем-то другом?

[Максим]

Vanya Huk Антон Спирин вам все верно расписал. Любые параметры храните в строке, и ее разбираете как нужно с любым уровнем вложенности. Так как, если есть правило, по которому строки будут попадать в URL, то значит можно будет придумать правило, по которому строка будет разбираться.