React-Redux - Reusable Container / Connector

Question

I completely lost the concept of a reaction-reduction container (i.e. a connector) as it does not do what I expected. My problem is straightforward, and reasonable for me, but I cannot find a well-written example of how to accomplish it.

Say we have a response component that connects to the repository with the product context, and we will call this component ProductContext.

Also, suppose we want to reuse ProductContextliberally throughout the application in order to avoid the boilerplate code for dispatching actions on all other components that may need products.

Illustratively, this is what I mean:

from DiscountuedProducts:

<ProductContext >
   // do something with props from container
</ProductContext >

from SeasonalProducts:

<ProductContext >
   // do something with props from container
</ProductContext >

, -, , , . ?

ProductContextComponent:

<section >
  <DiscontinuedProducts />
  <SeasonalProducts />
</section >

, , " ", , , .

, ProductContext:

@connect(state => ({
   products: state.productsReducer.products
}))
export default class ProductContext extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const clientId = this.context.clientInfo._id;
    dispatch(fetchProductsIfNeeded(clientId));
  }

 // get from parent
 static  contextTypes = {
    clientInfo: PropTypes.object.isRequired
  };

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


  render() {
    if (!this.props.products) return <Plugins.Loading />;
    .....
    return (
         // I want to put the products array here
      );
    }
 };

, :

DiscountuedProducts:

<ProductContext >
   // do something with props from container
</ProductContext >

DiscontinuedProducts , .

? ?

- , , , , . -.

: HOC.

Answer 1

redux, . mapToProps , , . , Babel 6, .

1. ....

-context.js:

   import React, { Component, PropTypes } from 'react';
   // redux
   import { connect } from 'react-redux';
   import { fetchProductsIfNeeded }  from '../../redux/actions/products-actions';

---

    // productsReducer is already in state from index.js w/configureStore
    @connect(state => ({
      products: state.productsReducer.products
    }))
   export default function ProductContext(Comp) {
    return (
      class extends Component {
        static propTypes = {
          children: PropTypes.node,
          dispatch: PropTypes.func.isRequired,
          products: PropTypes.array
        };

        static contextTypes = {
         clientInfo: PropTypes.object.isRequired;
        };

        componentDidMount() {
          const { dispatch } = this.props;
          const clientId = this.context.clientInfo._id;
          dispatch(fetchProductsIfNeeded(clientId));
        }

        render() {
          if (!this.props.products) return (<div>Loading products ..</div>);
          return (
            <Comp products={ this.props.products }>
              { this.props.children }
            </Comp>
          )
        }
      }
    )
  }

2. , product-context.js

< > slider.js:

import React, { Component, PropTypes } from 'react';
......
import ProductContext from '../../../context/product-context';

---

@Radium
@ProductContext 
export default class CarouselSlider extends Component {

  constructor(props) {
    super(props);   }

  ......

  static showSlideShow(carouselSlides) {
    carouselSlides.map((slide, index) => {
       ......          
     results.push (
       ......
      )
    });
    return results;   
  }

  render() {
    const carouselSlides = this.props.products;
    const results = CarouselSlider.showSlideShow(carouselSlides);
    return (
      <div id="Carousel" className="animation" ref="Carousel">
        { results }
      </div>
    );   
  } 
}

, . , , , HOC prop.

10 , contextType , .

, , todo.

Answer 2

- , , , , .

.

: shopping-cart/containers/CartContainer.js

, , ,

.. . , .

:

import { getTotal, getCartProducts } from '../reducers'

const mapStateToProps = (state) => {
  return {
    products: getCartProducts(state),
    total: getTotal(state)
  }
}

- .

, ProductContext , .

, , . , . , -.

:

import { checkout } from '../actions'

CartContainer.propTypes = {
  checkout: PropTypes.func.isRequired
}

connect(mapStateToProps,
  { checkout }
)(CartContainer)

, , , ( ) .

DiscontinuedProducts , , .

. , .

, .