How to make multiple stateful components on a page?

Question

JavaScript

I'm just learning about Rect in conjunction with Redux, and naturally questions arise that are difficult to find answers on the Internet. The question is that there is a simple data structure in redux by type:

{
  products : {
    productList1:[{Product},{Product},{Product}],
                productList2:[{Product},{Product},{Product}],

  },
  contacts : {
    phone:'512-421-3940',
    email:'[email protected]',
    address:'1739 Bubby Drive',
    content: "this is contacts page",
  },
  notFound:{},
}

those. there are several pages, on the products page I wanted to make two lists of products, it turns out this component:

import React     from 'react';
import {connect} from 'react-redux';
import './style.css';
import ProductItem from './productItem';

const ProductList = ({productList})=>{

  let products = productList.map((item,index)=>{
    return(
      <div class="col-sm-4">
        <ProductItem product={item} key={index} />
      </div>
      );
  });
  return(
  <div class="product-list">
    <div class="container">
      <div class="row">
        <div class="product-list__header">
          <h2 class="product-list__header__title">Pricing Table</h2>
        </div>
        {products}
      </div>
    </div>
  </div>
  );
}
export default ProductList;

I understood how to pass the initial state to each list, but how to make one reducer process two lists is not
And then I realized that I don’t understand how the storage is connected to the reducers and how this redux works, and the descriptions of these processes are very scarce.
In the context of react and local state, everything is simple, but when you display this state in redux, a similar misunderstanding arises.

Answer 1

Inside the connect function, you are subscribing to a piece of your store (that is, a piece of your application's entire state). It usually looks like this:

const mapStateToProps = state => ({ // state = все ваши редьюсеры, то есть тут лучше было бы писать store, но так уж поевелось..
  campaigns: state.campaigns, // компонент подписывается только на state.campaigns (то есть только на редьюсер campaigns)
});
connect(mapStateToProps/*, mapDispatchToProps*/)(CampaignsList) // происходит коннект, mapDispatshToProps - это для "прокидывания" создателей действий (action creator)

Therefore, you can simply connect to the same part in the store in both components, or even better, connect in the parent and render two lists as components.
Soon there will be a webinar (free admission) on the basics of redax, I think you will have figured it out by then, but nevertheless, visit ( vk / telegram , site )