ReactJs - Redux Reusable Service

Question

I understand the concept of Redux actions, gears and cartography in stores. I was able to successfully execute Redux in my application.

I was going to have fun using React context contexts for child components that needed data from Redux that had been called before.

Then I came across a strange situation when the data was mutated by a child. When I posted the problem to SO, the member told me that I should use contextTypes anyway.

Thus, the only way to overcome my problem was a map in the AGAIN repositories , in the parent element of the parent, for example, the higher component of the parent element, and passed this data to the child as a props,

But for me this is all wrong. Mapping to the same store again? What for? What? I do not understand? Why should I write this on every component that needs the same data, on another component mapped to?

  export default class Foo extends Component {        

  .....

  // I DID THIS STUFF IN A HIGHER COMPONENT.
  // WHY MUST I REPEAT MYSELF AGAIN?
  // WHAT AM I NOT UNDERSTANDING?

  static propTypes = {
    children: PropTypes.node.isRequired,
    dispatch: PropTypes.func.isRequired,
    products: PropTypes.array
  };

  componentDidMount() {
    const { dispatch } = this.props;  
    dispatch(fetchProductsIfNeeded());
  }

  .....

 }  

---

const mapStateToProps = (state) => {
  const {productsReducer } = state;
  if (!productsReducer) {
    return {
      isFetching: false,
      didInvalidate: false,
      error: null,
      products: []
    };
  }

  return {
    error: productsReducer.error,
    isFetching: productsReducer.isFetching,
    didInvalidate: productsReducer.didInvalidate,
    products: productsReducer.products
  };
};

export default connect(mapStateToProps)(Foo);

I looked at the containers, but it seems to me that the containers wrap all the dumb components in them immediately as such ...

   <ProductsContainer>
      <ProductsComponent />
      <ProductSpecialsComponent />
      <ProductsDiscountedComponent />
   </ProductsContainer>

And that’s not what I want. I thought that as a service, I could use this container in every corresponding mute component as such ....

   <ProductsContainer>
      <ProductsDiscountedComponent />
   </ProductsContainer>

   <ProductsContainer>
      <ProductSpecialsComponent />
   </ProductsContainer>

   <ProductsContainer>
      <ProductsComponent />
   </ProductsContainer>

Right now, in order to get my 3 subcomponents shown above, each of them must be matched with stores, and that just seems to be wrong.

I can not find anything that I could understand as a solution.

Question:

, , "" , ?

, .

Script:

, , " " JavaScript o/s , , Redux o/s React.

UPDATE:

...

React-Redux - /

Answer 1

-, . , - . . Redux, , , . , Immutable.js.

---

. , , "" . :

const Product = ({ name, comments }) => (
  <div>
    <h1>{name}</h1>
    <CommentsList comments={comments} />
  </div>
);

. , . , :

const ProductList = ({ products }) => (
  <div>
    {products.map( p => <Product product={product} /> )}
  </div>
);

class App extends Component {
  getInitialState () {
    return { products: [] };
  }

  componentDidMount () {
    // connect to store, blah blah...
  }

  render () {
    return (
      <div>
        {/* blah blah */}
        <ProductsList products={this.state.products} />
        {/* blah blah */}
      </div>
    );
  }
}

, , . App, , .

, . , HOC :

const WithProducts = Comp => class WrappedComponent extends Component {
  getInitialState () {
    return { products: [] };
  }

  componentDidMount () {
    // connect to store, blah blah...
  }

  render () {
    return (
      <Comp products={this.state.products} {...this.props} />
    );
  }
}

const ProductListWithProducts = WithProducts( ProductList );

, , - . . , ProductList Product, : , .

React .

---

, , . , - , . .. , . , (, , , Immutable, ).