如何使用Redux將圖像傳輸到另一個組件？

Question

我已經設置了Redux以從網上商店捕獲用戶選擇（項目，大小，價格），並將其發送到另一個Cart組件。 這可以正常工作，但是我想捕獲項目的圖像並將其發送到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組件：

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);

在Cart我正在渲染添加到購物車中的每個對象的項目選擇數據。 這也是我要顯示項目圖像的地方。

由於我設置了圖像滑塊，因此其中一張幻燈片的示例為：

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

const SlideNocHOne= (props) => {

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

export default SlideNocHOne;

假設我要把這個DETAIL.png圖片放到Cart DETAIL.png ，如何通過Redux與用戶選擇一起轉移它？

這些是我的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
    }
};

如何使用Redux設置將用戶選擇的圖像傳輸到Cart ？

Answer 1

如果組件的路徑相對穩定，並且圖像具有單個位置，則可以簡單地使用一個函數，該函數采用組件的displayName （在您的示例中為Cart等），然后將相對路徑返回圖像目錄。

如果有的話，您可以將鍵/值集合保存在化簡器中以獲取每個組件應具有的圖像，例如：

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

租用時，只需使用mapper函數即可，這將為您提供相對路徑。 諸如此類（或您可以映射出該數組）：

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

使用require來獲取模板中的圖像，例如：

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