Столкнулся с тем, что данные при использовании Редакса могут обрабатываться в двух местах. Бывает, что обработку данных прописывают прямо в редьюсерах. Различную сортировку, фильтрацию. После этого ее добавляют в стейт.
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()), а в нее все нужные данные из стейта. На выходе функция возвращает обработанные данные, которые сразу рендерятся компонентом. Слышал, что ее называют оберткой, возможно для нее есть более правильное название.
Где лучше прописывать логику?
Я сейчас начал обработку данных в этой функции, прописал сортировку, сейчас нужно еще добавить фильтрацию. Получается немного громоздко, а как этот вариант можно разбить на части - не представляю.
Также получается, что в первом варианте мы обновляем данные в стейте и уже на их основе рендерим компоненты. Во втором случае может так получаться, что данные в стейте всегда будут одинаковы. Допустим, пользователь нажимает кнопку сортировки, затем фильтрации и эта вся логика осуществляется без изменения данных в стейте, а внутри нашей функции. Какой вариант написания логики предпочтительнее?