Доброе утро, есть компонент "Страница категории товаров"
в useEffect делаю fetch
/api/category/:category, который отдает:
информацию категории, тайтл, h1, список товаров и тп
{
title: 'Мобильные телефоны',
h1: 'Мобильные телефоны в Уфе',
products: [
{ ... },
{ ... },
...
],
...
}
Компонент CategoryPage:
const CategoryPage = ({ categorySlug }) => {
const [page, setPage] = useState(0);
useEffect( () => {
fetch(`/api/category/${categorySlug}`)
.then( (res) => res.json())
.then( (res) => setPage(res));
}, []);
return (
<>
<h1>{page.h1}</h1>
<ProductListContainer products={page.products} categorySlug={categorySlug} />
</>
);
};
За продукты отвечает компонент ProductListContainer, и вот он как раз является контейнером, он на входе получает первоначальный список продуктов, а затем уже сам работает с api и передает все простому компоненту, который все выводит.
Компонент ProductListContainer
const ProductListContainer = ({ products, categorySlug }) => {
const [productsList, setProducts] = useState(products); // Не уверен что так можно.
useEffect( () => {
if(productsList.length === 0) {
fetch(`/category/${categorySlug}/products`)
.then( (res) => res.json())
.then( (res) => setProducts(res));
}
}
, []);
const loadProducts = ({ page, count }) => {
fetch(`/api/category/${categorySlug}/products?page=${page}&count=${count}`)
.then( (res) => res.json())
.then( (res) => setProducts(res));
};
return <ProductList products={productsList} loadProducts={loadProducts}/>;
};
1. Правильно ли я организовал компонент - страницу ?
2. Правильно ли что компонент "страница категории" это обычный компонент ( хоть и имеет состояние, и логику ), Не нужно ли его назвать "контейнером" ? (он не переиспользуется)
3. Нет ничего дурного в том, что в ProductListContainer я передаю начальные данные, а дальше он работает сам, обращаясь к другому url ?
4. Можно ли использовать такого вида конструкции ? :
const MyComponent = ( props ) => {
const [count, setCount] = useState(props.count); // записывать в state из props
}
Я так понимаю redux тут не нужен, потому что тут нет каких-то сложных связей, просто контейнер - компонент, и общий store не нужен, я прав ?
P.S Есть у кого-нибудь пример полноценного react+redux приложения на github? Я пытался найти, но почти весь он завален очень примитивными приложениями в стиле ToDo, и подобным чего-то более сложного найти не смог, либо старые, либо не доделанные, либо todo, буду очень благодарен если кто-то поделится ссылкой
Простой