Как организовать компонент «Страница категории»?

Доброе утро, есть компонент "Страница категории товаров"
в 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, буду очень благодарен если кто-то поделится ссылкой
  • Вопрос задан
  • 257 просмотров
Решения вопроса 1
Robur
@Robur
Знаю больше чем это необходимо
Раз уж просили:
1. Что значит "правильно"? нормальноу вас организовано
2. называть что-то контейнером или нет - это ваше личное дело, в зависимости от того как вы для себя решите код организовать. каких-то требований и общепринятых стандартов которые нельзя нарушать по этому поводу нет.
3. в общем случае - лучше загружать данные где-то в одном месте. Но бывают и исключения, дурно ли это у вас или нет здесь - я не знаю. Может так меньше запросов на сервер или лучше код, - тогда не дурно. Если вы просто не знали как код организовать и скопипастили загрузку в два места - то дурно.
4. можно
х. если нет нужды в редаксе, то да, он и не нужен. Если код начнет усложняться - какой-то стейт приложения потребуется.

ПС. можете посмотреть на apollo-client, у него внутри редакс вроде. Но подобного плана библиотеки писать вам вряд ли придется.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы