Redux нумерация страниц с фильтром и сортировкой

Question

Я изучаю избыточность и хочу реализовать разбиение на страницы со свойствами сортировки и фильтрации.

Это API-адрес http://localhost:3001/cars?manufacturer=Fiat&color=white&sort=asc&page=1

Существует также список производителей http://localhost:3001/manufacturers

Поскольку изначально все раскрывающиеся списки будут иметь значение по умолчанию, а страница будет 1 Будет несколько редукторов для выбора производителей, цветов и автомобилей.

  //fetchManufacturerReducer
    const initialState = {
        manufacturers:[]
    };

  //fetchCarsListReducer
    const initialState = {
      manufacturers:"Fiat",
      color:"Black",
      data:{
        cars:[],
        currentPage:1,
        totalPage:10
      }
   };

Вопросы:

1. Это правильный подход?

2. Как я могу контролировать порядок запросов - сначалаполучить список производителей, цветов, затем carsList со значениями по умолчанию и страницей 1

3. Когда пользователь меняет цвет на Black как я могу изменить color activeColor для отправки нового fetchCarsList?

4. На каком-то этапе мне пришлось бы разделить состояние между редукторами, что кажется трудным делом - лучше ли поставить все в один редуктор ?

Answer 1

Redux - это все для хранения / изменения ваших данных (состояния) и легкого доступа к ним - если это нелегко - вам нужно изменить состав редукторов, однако, если вы только начинаете с redux, все идет)

TLDR :

Позвольте мне ответить в обратном порядке

Было бы лучше поместить все в один Редуктор?

У меня был опыт работы с товарищем по команде, который только начал работать с избыточностью и придумал идею сохранить всю логику фильтрации / сортировки вогромный (более 700 лок) редуктор.Время и возможности приходили и уходили, и позже стало ясно, что у огромного редуктора есть огромный недостаток в управлении огромным количеством реквизита каждый раз, когда появляется новое действие, которое оказывается очень подверженным ошибкам, когда оно начинает расти.

Кроме того, наличие огромного редуктора имеет тот недостаток, что его трудно понять другим людям в команде.

Когда пользователь меняет цвет на Черный, как я могу изменить цвет activeColor для отправки нового fetchCarsList?

Вы не можете отправлять изменения данных между редукторами.Но вы можете достичь желаемого, отправив правильное действие на несколько редукторов

Как я могу контролировать порядок запросов - сначала получить список производителей, цветов, затем carsList со значениями по умолчанию и страницей

Redux - это сохранение данных - редукторы - это мутацияданные с помощью действий, а не о бизнес-логике, основанной на данных или получении данных)

1. Это правильный подход?

Один изХороший подход заключается в том, чтобы найти решение, которое не заставило бы вас задать вопрос (3) (4), потому что эти вопросы в совокупности являются признаком того, что состав редукторов (и данных!) неверен.

Я не могу предложить вамбольше, потому что состав очень во многом зависит от того, как к данным получают доступ, но вы можете начать с того, что у вас есть, и изменить вещи позже, когда увидите повторяющиеся схемы доступа к данным / их изменения .

Answer 2

1. Если ваше приложение использует данные производителей и цветов в других местах.Имеет смысл поместить эти две данные в глобальное хранилище (приставка).В противном случае не храните его в локальном состоянии компонента.

2. Используйте Promise

   Promise.all (getManufactures (), getColors ()). Then ([изготовитель, цвета] => {getCars (изготовитель, цвета))}

3. Отделяйте логику вызова API (getCars), используйте eventHandler для вызова этой логики onColorChange, onManufactureChange

4. Используйте локальное состояние для обработки данных при фильтрации, так как вы не можете использовать эти данные в других местах.