title: How to avoid using useSelector hook many times?
body: <p>I am having a trouble with decoupling business logic and ui. I am new to react. I know that my component contains too much responsibilities. Also i am not sure if it is a good idea to use a lot of variables with useSelector hook, but i dont know hot to avoid it. Please can someone explain how to fix it or give some adviсe what should to read/watch?</p>
  <pre><code>    const Catalog = () =&gt; {
          const dispatch = useDispatch();
          const items = useSelector(state =&gt; state.catalog.plantsList);
          const isFetching = useSelector(state =&gt; state.catalog.isFetching);
          const currentPage = useSelector(state =&gt; state.catalog.currentPage);
          const totalCount = useSelector(state =&gt; state.catalog.totalCount);
          const limitItems = useSelector(state =&gt; state.catalog.limitItems);
          const pagesCount = Math.ceil(totalCount/limitItems);
          const pages = [];
          createPages(pages, pagesCount, currentPage);
  
          useEffect(() =&gt; {
              dispatch(fetchData(currentPage, limitItems));
          }, [currentPage]);
  
          let plantItems = items.map(p =&gt; &lt;PlantItem key={p.id} id={p.id} image={p.image} name={p.name}
                                                     cost={p.cost}/&gt;)
          return (
              &lt;div className={s.catalog}&gt;
                  &lt;p className={s.catalog__description}&gt;Сдавая пластик в пункты приема, Вы получаете природные баллы. За один
                      килограмм пластика можно получить
                      10 природных баллов.&lt;/p&gt;
                  &lt;div className={ isFetching === false ? s.catalog__list : s.fetching }&gt;
                      {
                          isFetching === false ?
                              plantItems
                              :
                              &lt;Preloader/&gt;
                      }
                  &lt;/div&gt;
                  &lt;div className={s.catalog__pages}&gt;
                      {pages.map((page, index) =&gt; &lt;div
                          key={index}
                          className={currentPage == page ? s.currentPage : s.page}
                          onClick={() =&gt; dispatch(setCurrentPage(page))}&gt;{page}&lt;/div&gt;)}
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      };
  
  
  
  </code></pre>