2017-08-08 10 views
0

Webshop(アイテム、サイズ、価格)からユーザの選択を取得し、別のCartコンポーネントに送信するようReduxを設定しました。これは完全に機能していますが、アイテムの画像をキャプチャしてCartに送信します。カートに商品を追加することができる各商品ページ内には、ユーザー選択とともに送信したい画像があります。これは、製品ページの構成要素の一例である:CartReduxを使用してイメージを別のコンポーネントに転送する方法は?

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(
      <div className= "Webcart" id="Webcart"> 
       <div id='WebcartWrapper'> 
        <ul id='webCartList'> 
         {this.state.items.map((item, index) => { 
          return <li className='cartItems' key={'cartItems_'+index}> 
           <h4>{item.item}</h4> 
           <p>Size: {item.size}</p> 
           <p>Price: {item.price}</p> 
           <button onClick={() => this.handleClick(item)}>Remove</button> 
          </li> 
         })} 
        </ul> 
        <div>Total: ${this.countTotal()}</div> 
       </div> 
      </div> 
     ); 
    } 
} 



const mapDispatchToProps = (dispatch) => { 
    return { 
     onCartAdd: (cart) => { 
      dispatch(addCart(cart)); 
     }, 
     onCartRemove: (item) => { 
      dispatch(removeCart(item)); 
     }, 
    } 
} 

function mapStateToProps(state) { 
    return { cart: state.cart }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Cart); 

私はカートに追加された各オブジェクトに対して項目選択データをレンダリングしています:

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 (
      <div className= "ProductPage" id="ProductPage"> 
       <div id='slider'> 
        {this.state.slideCount === 1 ? <Slideone /> : null} 
        {this.state.slideCount === 2 ? <Slidetwo /> : null} 

        <RightArrow nextSlide={this.nextSlide} /> 
        <LeftArrow previousSlide={this.previousSlide} /> 

       </div> 
       <div id='InfoSquare'> 
        <div id='wrapper'> 
         <div id='item' ref={i=>this.description=i}>LOGO TEE</div> 
         <div id='description'>Black tee 100% cotton with red silkscreened logo on front and back.</div> 
         <select id="size2" onChange={this.change} value={this.state.value}> 
          <option value="medium">Medium</option> 
          <option value="large">Large</option> 
          <option value="x-large">X-large</option> 
         </select> 
         <button onClick={this.handleClick} className="addit">ADD TO CART</button> 
        </div> 

       </div> 
      </div> 
     ); 
    } 

    nextSlide() { 
     this.setState({ slideCount: this.state.slideCount + 1 }) 
    } 

    previousSlide() { 
     this.setState({ slideCount: this.state.slideCount - 1 }) 
    } 

} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onCartAdd: (cart) => { 
      dispatch(addCart(cart)); 
     }, 
    } 
} 

function mapStateToProps(state) { 
    return { 
     cart: state.cart 
    }; 
} 

export default connect(mapStateToProps,mapDispatchToProps)(ProductPage3); 

は、これは私のCartコンポーネントです。ここで私はアイテム画像を表示したい場所です。私が設定した画像のスライダーを持っているので

、スライドの1の例は次のようになります。

import React, { Component } from 'react'; 
import take1 from './DETAIL.png'; 

const SlideNocHOne= (props) => { 

    return <img src= {take1} id="slide"></img> 
} 

export default SlideNocHOne; 

のは、私がCart上でこのDETAIL.pngイメージをしたいとしましょう、どのように私は、ユーザーの選択でそれを転送することができReduxを使って?

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 && 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) => 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 
    } 
}; 

どのように私はCartにユーザ選択の画像を転送するために、私のReduxのセットアップを使用することができます。

これらは私のReduxのコンポーネントですか?

+0

こんにちは:

const relativeImagePath = getRelativeImageDirPathByCompName('CartComponent') + this.props.images.CartComponent[0]; 

使用requireのように、テンプレートに画像をフェッチします間違いなくあなたを助けます – Jeffin

答えて

0

コンポーネントのパスが比較的安定していて、画像の場所が1つしかない場合は、コンポーネントのdisplayName(例ではCartなど)を取得し、イメージディレクトリ。

あなたがいることを持っている場合は、あなただけのように、各コンポーネントが持っているべきイメージの減速にキー/値のコレクションを保存することができます:

{ 
    CartComponent: ['DETAIL.png', 'DETAIL_2.png'] 
    ... 
} 

胸が張り裂けるがあなたに提供しますマッパー機能を使用しますそれはそれです。 (またはあなただけのその配列をマッピングすることができる)ような何か:あなたは、私が希望codepenリンクを提供することができれば、

<img src={require(relativeImagePath)} alt="Something"/>

関連する問題