title: React Redux how to properly distribute components
body: <p><strong>I have a store in Redux, I'm making an online clothes shop with products for Womans and Mens</strong></p>
  <pre><code>const defaultState = {
    womanProducts: 
     [
       {
         name: &quot;Mini Skirt&quot;, 
         img: &quot;https://static.pullandbear.net/2/photos//2022/I/0/1/p/8399/316/800/8399316800_4_1_8.jpg?t=1656932863233&amp;imwidth=563&quot;, 
         price: 35, 
         inCart: 1, 
         id: 1.1,
       }, 
       {
         name: &quot;Basic Jeans&quot;, 
         img: &quot;https://static.pullandbear.net/2/photos//2022/I/0/1/p/8685/326/400/8685326400_4_1_8.jpg?t=1657798996961&amp;imwidth=563&quot;, 
         price: 39, 
         inCart: 1, 
         id: 1.2,
       }, 
       {  
         name: &quot;Fit Dress&quot;, 
         img: &quot;https://static.pullandbear.net/2/photos//2022/V/0/1/p/4390/422/611/4390422611_4_1_8.jpg?t=1643722977148&amp;imwidth=563&quot;, 
         price: 45, 
         inCart: 1, 
         id: 1.3,
       }, 
       {
         name: &quot;Basic Sweatshirt&quot;, 
         img: &quot;https://static.pullandbear.net/2/photos//2021/I/0/1/p/8393/363/485/8393363485_4_1_8.jpg?t=1634212398331&amp;imwidth=563&quot;, 
         price: 29, 
         inCart: 1, 
         id: 1.4,
       }
     ],
    manProducts: 
     [
       {
         name: &quot;Basic Hoodie&quot;, 
         img: &quot;https://static.pullandbear.net/2/photos//2022/I/0/2/p/8591/513/250/05/8591513250_6_1_8.jpg?t=1648556110506&amp;imwidth=563&quot;, 
         price: 39, 
         inCart: 1, 
         id: 2.1,
       }, 
       {
         name: &quot;Basic Jeans&quot;, 
         img: &quot;https://static.pullandbear.net/2/photos//2022/I/0/2/p/8591/513/827/03/8591513827_6_1_8.jpg?t=1646659329763&amp;imwidth=563&quot;, 
         price: 29, 
         inCart: 1, 
         id: 2.2,
       }, 
       {
         name: &quot;Black Shorts&quot;, 
         img: &quot;https://static.pullandbear.net/2/photos//2021/I/0/2/p/4695/507/800/4695507800_4_1_8.jpg?t=1629285223879&amp;imwidth=563&quot;, 
         price: 19, 
         inCart: 1, 
         id: 2.3,
       }, 
       {
         name: &quot;Naruto Set&quot;, 
         img: &quot;https://static.pullandbear.net/2/photos//2022/V/0/2/p/4693/700/800/4693700800_4_1_8.jpg?t=1643120792610&amp;imwidth=563&quot;, 
         price: 59, 
         inCart: 1, 
         id: 2.4,
       }
     ],
     cartProducts: [],
  
   } 
  </code></pre>
  <p><strong>And also I have a two components, where I get products from store, drawing them in two pages and there is function to add products to shopping cart</strong></p>
  <p><strong>Components:</strong></p>
  <p>WomanProducts:</p>
  <pre><code>export default function WomansProducts() {
    const dispatch = useDispatch();
    const selector = useSelector(state =&gt; state);
    const womanProducts = selector.womanProducts;
    const cartProducts = selector.cartProducts;
  
    const addProducts = (id) =&gt; {
        let isInCart = false;
        cartProducts.forEach(el =&gt; {
            if(id === el.id) {
                isInCart = true
            }
        })
        if(!isInCart) {
            dispatch({type: &quot;ADD_PRODUCTS&quot;, payload: womanProducts.find((product) =&gt; id === product.id)})
        }
    }
  
    return (
        &lt;div className=&quot;mainProducts&quot;&gt;
            {womanProducts.map(item =&gt; 
                &lt;div className=&quot;womanProduct&quot; key={item.id}&gt;
                    &lt;img src={item.img} /&gt;
                    &lt;h3&gt;{item.name}&lt;/h3&gt;
                    &lt;h3&gt;{item.price}$&lt;/h3&gt;
                    &lt;button onClick={() =&gt; addProducts(item.id)}&gt;Add to Cart&lt;/button&gt;
                &lt;/div&gt;
            )}
        &lt;/div&gt;
    )
  </code></pre>
  <p>}</p>
  <p>MenProducts:</p>
  <pre><code>export default function MansProducts() {
    const dispatch = useDispatch();
    const selector = useSelector(state =&gt; state);
    const manProducts = selector.manProducts;
    const cartProducts = selector.cartProducts;
  
    const addProducts = (id) =&gt; {
        let isInCart = false;
        cartProducts.forEach(el =&gt; {
            if(id === el.id) {
              isInCart = true
            }
        })
        if(!isInCart) {
            dispatch({type: &quot;ADD_PRODUCTS&quot;, payload: manProducts.find((product) =&gt; id === product.id)})
        }
    } 
  
    return (
        &lt;div className=&quot;mainProducts&quot;&gt;
            {manProducts.map(item =&gt; 
                &lt;div className=&quot;manProduct&quot; key={item.id}&gt;
                    &lt;img src={item.img} /&gt;
                    &lt;h3&gt;{item.name}&lt;/h3&gt;
                    &lt;h3&gt;{item.price}$&lt;/h3&gt;
                    &lt;button onClick={() =&gt; addProducts(item.id)}&gt;Add to Cart&lt;/button&gt;
                &lt;/div&gt;
            )}
        &lt;/div&gt;
    )
  </code></pre>
  <p>}</p>
  <p><strong>These components are the same, is it okay or I should to distribute this components? And how?</strong></p>