Плохая практика Redux # 5: Дублированное состояние

Допустим, вам нужно отобразить отфильтрованный список товаров.

Одним из подходов может быть сохранение отфильтрованного списка при каждом изменении фильтра в состоянии компонента или в другом ключе в хранилище Redux:

onFilterChange(filter) {
  this.setState({
    filteredProducts: this.props.products.filter(...)
  })
}

лучшим подходом было бы использование кэшированных селекторов с reselect:

mapStateToProps = (state) => ({
  filteredProducts: filteredProductsSelector(state)
})

Или рассчитать вычисленные данные при рендеринге, если они не используются совместно и выполняются быстро:

render() {
  const filteredProducts = this.props.products.filter(...);
  return <div>{ filteredProducts.map(...) }</div>;
}

Или используйте хук «useMemo», чтобы запомнить его:

myComp({ products }) {
  const filteredProducts = useMemo(
    () => products.filter(...), [products]
  );
  return <div>{ filteredProducts.map(...) }</div>;
}

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

Все статьи из этой серии:

https://medium.com/@adamklein_66511/redux-bad-practices-1-lists-as-arrays-9115ba87b0ce

https://medium.com/@adamklein_66511/redux-bad-practices-2-duplicate-code-9f2f3d774d4d

https://medium.com/@adamklein_66511/redux-bad-practices-3-nested-state-6eebf1a410df

https://medium.com/@adamklein_66511/redux-bad-practices-5-duplicate-state-996d259758e3

https://medium.com/@adamklein_66511/redux-bad-practices-6-new-objects-on-the-fly-c38b503948a5

https://medium.com/@adamklein_66511/redux-bad-practices-7-mix-ui-state-with-model-data-cdca6c8d8fd9

Первоначально опубликовано на 500tech.com.