Фильтрация данных React Native. Лучшие практики. - PullRequest
Новая
       39

Фильтрация данных React Native. Лучшие практики.

0 голосов
/ 18 апреля 2020

Мне нужен совет о том, где выполнять фильтрацию данных для достижения наилучшей производительности. Допустим, я получаю большой массив продуктов с одной конечной точки удаленного API и категорий продуктов с другой конечной точки. Я храню их в состоянии Redux, а также сохраняю в базе данных Realm, чтобы они были доступны для автономного использования.

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

Мой код выглядит следующим образом: 

const ProductCategories = (props) => {

const isFocused = useIsFocused();

useEffect(() => {
    if (isFocused) {
      setItems(props.productCategories);
    } 
  }, [isFocused]);

return ( 
 ...
 );
};

const mapStateToProps = (state) => ({
  productCategories: state.catalog.productCategories,
});

const ProductsList = (props) => {

const isFocused = useIsFocused();

const productsFilteredByCategory = props.products.filter((product) => {
    return product.category === id;
  });
  useEffect(() => {
    if (isFocused) {
      setItems(productsFilteredByCategory);
    } 
  }, [isFocused]);

return (
...
)


const mapStateToProps = (state) => ({
  products: state.catalog.products,
});

1 Ответ

1 голос
/ 18 апреля 2020

Вы должны нормализовать (вы можете увидеть основные принципы здесь ) данные в формате приставки к следующему представлению: 

// redux store
{
  categories: {
    1: { // id of category
      id: 1,
      title: 'some',
      products: [1, 2, 3] // ids of products
    },
    ...
  },
  products: {
    1: { // id of product
      id: 1,
      title: 'some product',
    },
    ...
  }
}

Затем вы можете создать несколько селекторов, которые будут даже без памятка работает намного быстрее, чем фильтр, потому что время получения данных от объекта по свойству постоянно 

const getCategory = (state, categoryId) => state.categories[categoryId]
const getProduct = (state, productId) => state.products[productId]

const getCategoryProducts = (state, categoryId) => {
  const category = getCategory(state, categoryId);

  if (!category) return [];

  return category.products.map((productId) => getProduct(state, productId))
}
...