title: How to transfer an image to another component using Redux?
body: <p>I've set up my Redux to capture a user selection from a webshop (item, size, price) and send it to another <code>Cart</code> component. This is working perfectly, but I want to capture an image of the item and send it to <code>Cart</code>. Within each product page where you can add an item to the cart there is an image that I also would like to send with the user selection. This is an example of the product page component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { addCart } from '../../actions';
  
  import SeltzShirt from './seltzshirt.jpg';
  import Slideone from './slideSeltzOne';
  import Slidetwo from './slideSeltzTwo';
  import RightArrow from './rightarrow';
  import LeftArrow from './leftarrow';
  
  export class ProductPage3 extends  Component {
  
      constructor(props) {
          super(props);
          this.state = {
              slideCount: 1, 
              value: 'medium', cartData: {}   
          }
  
          this.nextSlide = this.nextSlide.bind(this);
          this.previousSlide = this.previousSlide.bind(this);
          this.handleClick = this.handleClick.bind(this);
          this.change = this.change.bind(this);
      }
  
      handleClick() {
          let cart = {price:25,item:this.description.innerHTML,size:this.state.value};
          this.props.onCartAdd(cart);
          console.log(cart);
          this.itemSelection(cart);
      } 
  
      ...
  
      componentDidMount () {
          window.scrollTo(0, 0)
      }
  
      render() {
          return (
              &lt;div className= "ProductPage" id="ProductPage"&gt;
                  &lt;div id='slider'&gt;
                      {this.state.slideCount === 1 ? &lt;Slideone /&gt; : null}
                      {this.state.slideCount === 2 ? &lt;Slidetwo /&gt; : null}
  
                      &lt;RightArrow nextSlide={this.nextSlide} /&gt;
                      &lt;LeftArrow previousSlide={this.previousSlide} /&gt;
  
                  &lt;/div&gt;
                  &lt;div id='InfoSquare'&gt;
                      &lt;div id='wrapper'&gt;
                          &lt;div id='item' ref={i=&gt;this.description=i}&gt;LOGO TEE&lt;/div&gt;
                          &lt;div id='description'&gt;Black tee 100% cotton with red silkscreened logo on front and back.&lt;/div&gt;
                          &lt;select id="size2" onChange={this.change} value={this.state.value}&gt;
                              &lt;option value="medium"&gt;Medium&lt;/option&gt;
                              &lt;option value="large"&gt;Large&lt;/option&gt;
                              &lt;option value="x-large"&gt;X-large&lt;/option&gt;
                          &lt;/select&gt;
                          &lt;button onClick={this.handleClick} className="addit"&gt;ADD TO CART&lt;/button&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;   
          );
      }
  
       nextSlide() {
        this.setState({ slideCount: this.state.slideCount + 1 })
      }
  
      previousSlide() {
        this.setState({ slideCount: this.state.slideCount - 1 })
      }
  
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          onCartAdd: (cart) =&gt; {
              dispatch(addCart(cart));
          },
      }
  }
  
  function mapStateToProps(state) {
     return {
        cart: state.cart
     };
  }
  
  export default connect(mapStateToProps,mapDispatchToProps)(ProductPage3);
  </code></pre>
  
  <p>This is my <code>Cart</code> component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {addCart} from './Shop';
  import { removeCart } from '../../actions'; 
  import { connect } from 'react-redux';
  
  export class Cart extends Component {
      constructor(props) {
          super(props);
          this.state = {items: this.props.cart,cart: [],total: 0};
      }
  
      ...
  
      render() {
          return(
              &lt;div className= "Webcart" id="Webcart"&gt;
                  &lt;div id='WebcartWrapper'&gt;
                      &lt;ul id='webCartList'&gt;
                          {this.state.items.map((item, index) =&gt; {
                              return &lt;li className='cartItems' key={'cartItems_'+index}&gt;
                                  &lt;h4&gt;{item.item}&lt;/h4&gt;
                                  &lt;p&gt;Size: {item.size}&lt;/p&gt;
                                  &lt;p&gt;Price: {item.price}&lt;/p&gt;
                                  &lt;button onClick={() =&gt; this.handleClick(item)}&gt;Remove&lt;/button&gt;
                              &lt;/li&gt;
                          })}
                      &lt;/ul&gt;
                      &lt;div&gt;Total: ${this.countTotal()}&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          onCartAdd: (cart) =&gt; {
              dispatch(addCart(cart));
          },
          onCartRemove: (item) =&gt; {
              dispatch(removeCart(item));
          },
      }
  }
  
  function mapStateToProps(state) {
    return { cart: state.cart };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Cart);
  </code></pre>
  
  <p>In <code>Cart</code> I'm rendering the item selection data for each object added to the cart. Here is where I want to display the item image also.</p>
  
  <p>Since I have a image slider set up, an example of one of the slides would be:</p>
  
  <pre><code>import React, { Component } from 'react';
  import take1 from './DETAIL.png';
  
  const SlideNocHOne= (props) =&gt; {
  
      return &lt;img src= {take1} id="slide"&gt;&lt;/img&gt;
  }
  
  export default SlideNocHOne;
  </code></pre>
  
  <p>Let's say I want this <code>DETAIL.png</code> image on the <code>Cart</code>, how could I transfer it with the user selection using Redux?</p>
  
  <p>These are my Redux components:</p>
  
  <pre><code>import { createStore, applyMiddleware, compose } from 'redux';
  import { persistStore, autoRehydrate } from 'redux-persist';
  import  reducer  from './reducers';
  import thunkMiddleware from 'redux-thunk';
  import {createLogger} from 'redux-logger';
  
  
  const store = createStore(
    reducer,
    undefined,
    compose(
      applyMiddleware(createLogger(), thunkMiddleware),
      autoRehydrate()
    )
  );
  
  persistStore(store, {whitelist: ['cart']});
  
  export default store; 
  
  import {ADD_CART} from './actions';
  import {REMOVE_CART} from './actions';
  import { REHYDRATE } from 'redux-persist/constants';
  
  export default Reducer;
  
  var initialState = {
    cart:{},
    data: [],
    url: "/api/comments",
    pollInterval: 2000
  };
  
  function Reducer(state = initialState, action){
      switch(action.type){
          case REHYDRATE:
                  if (action.payload &amp;&amp; action.payload.cart) {
                      return { ...state, ...action.payload.cart };
                  }
              return state;
  
              case ADD_CART:
                  return {
                      ...state,
                      cart: [...state.cart, action.payload]
                  }
  
              case REMOVE_CART:
                  return {
                      ...state,
                      cart: state.cart.filter((item) =&gt; action.payload !== item)
                  }
  
  
  
              default:
                  return state; 
      };
  }
  
  export const ADD_CART = 'ADD_CART';
  export const REMOVE_CART = 'REMOVE_CART';
  
  export function addCart(item){
      return {
          type: ADD_CART,
          payload: item
      }
  };
  
  export function removeCart(item){
      return{
          type:REMOVE_CART,
          payload: item
      }
  };
  </code></pre>
  
  <p>How can I use my Redux setup to transfer the image of a user selection to <code>Cart</code>?</p>