0

Столкнулся с тем, что данные при использовании Редакса могут обрабатываться в двух местах. Бывает, что обработку данных прописывают прямо в редьюсерах. Различную сортировку, фильтрацию. После этого ее добавляют в стейт.

const todos = (state = [], action) => {
  switch (action.type) {
    case 'TOGGLE_TODO':
      return state.map(t => 
        todo(t, action)
      );
    default: 
      return state;
  }
};

Второй вариант обработки данных вот такого плана:

const mapStateToProps = (state) => {
  return {
    filteredArr: getSortedCompanies(state.ourData.json, state.ourSort.sortCompany, state.ourSort.sortBalance)
  };
}

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

Где лучше прописывать логику?

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

Также получается, что в первом варианте мы обновляем данные в стейте и уже на их основе рендерим компоненты. Во втором случае может так получаться, что данные в стейте всегда будут одинаковы. Допустим, пользователь нажимает кнопку сортировки, затем фильтрации и эта вся логика осуществляется без изменения данных в стейте, а внутри нашей функции. Какой вариант написания логики предпочтительнее?

1 ответ 1

2

Сравнивать данные 2 варианта некорректно, т.к. первый из них неверен с точки зрения Redux. Единственная задача редьюсера - преобразование состояния из предыдущего в новое. Ни сортировка, ни фильтрация к этому не относится. Собственно сами эти два слова обозначают действия, но никак не состояние. Другое дело что состояние может (и должно) содержать данные необходимые для этих действий: направление (сортировки) и строка фильтра. Но непосредственно сортировка и фильтрация должны делаться в рендере, либо в обертке props (как в вашем 2-м варианте). где именно - с точки зрения Redux не принципиально.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.