Question

我正在构建自动售货机的这个小项目，但是我遇到了问题，因为我的状态的两个不同部分从只应更改一个部分的减速器中更改。以下是代码段：

//Action creators

export const buyProduct = product => {
	return {
		type: 'BUY_PRODUCT',
		payload: product
	};
};

export const showProducts = () => {
	return {
		type: 'SHOW_PRODUCTS',
	};
};

export const addCredit = amount => {
	return {
		type: 'ADD_MONEY',
		payload: amount
	};
};

export const refillVendingMachine = () => {
	return {
		type: 'REFILL_VENDING_MACHINE'
	};
};

//Reducers

import { combineReducers } from 'redux';

const data = [
	{code: '110', price: 10, name: 'KitKat', quantity: 5, image: 'https://i.ibb.co/41dKJ8r/kitkat.jpg'},
	{code: '111', price: 11, name: 'Nuggets', quantity: 5, image: 'http://lorempixel.com/135/100/food'},
	{code: '112', price: 12, name: 'Mars', quantity: 5, image: 'http://lorempixel.com/135/100/food'},
	{code: '113', price: 13, name: 'Twix', quantity: 5, image: 'http://lorempixel.com/135/100/food'},
	{code: '114', price: 14, name: '7days', quantity: 5, image: 'http://lorempixel.com/135/100/food'}, 
	{code: '115', price: 15, name: 'Water', quantity: 5, image: 'http://lorempixel.com/135/100/food'},
	{code: '210', price: 14, name: '7days', quantity: 5, image: 'http://lorempixel.com/135/100/food'},
	{code: '211', price: 14, name: '7days', quantity: 5, image: 'http://lorempixel.com/135/100/food'},
	{code: '212', price: 14, name: '7days', quantity: 5, image: 'http://lorempixel.com/135/100/food'}
	];

const productsReducer = (products = data, action) => {
	if(action.type === 'BUY_PRODUCT') {
		return products.map(product => {
			if(product.code === action.payload.code) {
				if(product.quantity === 1) {
					product.quantity--;
					product.image = "https://i.ibb.co/w0sSgpd/sold-out.png";
					return product;
				};		
				product.quantity--		
				return product;
			};
			return product;	
		});
	}
	
	return products;
};


const moneyReducer = (state = 0, action) => {
	if(action.type === 'BUY_PRODUCT') {
		return state - parseInt(action.payload.price);
	} else if(action.type === "ADD_MONEY") {
		return state + parseInt(action.payload);
	}
	return state;
};

const boughtProductsReducer = (state = [], action) => {
	if(action.type === 'BUY_PRODUCT') {
		if(state.length === 3){
			state.shift();
		}
		return [...state, action.payload]
	};

	return state;
};


export default combineReducers({
	products: productsReducer,
	money: moneyReducer,
	boughtProducts: boughtProductsReducer
});

就像您在自动售货机中遇到的那样，当产品的数量变为0时，它应该仅在产品状态下显示售罄，但也会在buyproducts状态下更改图像。

知道为什么吗？以及如何解决？

更新：

在这里我展示我所有的产品，在这里我需要更改图像

import React from 'react';
import './Rows.css';
import './Product.css';
import { connect } from 'react-redux';


class Rows extends React.Component {
	renderRows = () => {

			return this.props.products.map(product => {

				return (
					<div className="this">
					<div className="product" key={product.code}>
						<div className="body">
							<div className="title">
								{product.name}
							</div>
							<div className="image">
								<img alt="blablabla" src={product.image} />
							</div>
						</div>
						<div className="extra">
							<span className="text">Q: {product.quantity}</span>
						</div>
						</div>
						<div className="content">
							<span className="text">#{product.code}</span>
							<span className="text">{product.price} $</span>
						</div>
					
					</div>
				);
			});
		
	};

	render() {
		return (
			<React.Fragment>
				{this.renderRows()}
			</React.Fragment>
		);
	};
};

const mapStateToProps = state => {
	console.log(state);
	return {products: state.products};
	};
export default connect(mapStateToProps)(Rows);

这是我将购买的产品存放在此处的图像应该保持不变的地方

import React from 'react';
import { connect } from 'react-redux';
import './Bin.css';

class Bin extends React.Component {
	renderBin = () => {
		console.log(this.props.boughtProducts);
		return this.props.boughtProducts.map(product => {
			return <div className="product" key={product.code*Math.random()}>
					<div className="body">
						<div className="title">
							{product.name}
						</div>
						<div className="image">
							<img alt="blablabla" src={product.image} />
						</div>
					</div>
				</div>
		});
	};

 render() {
 	return (
 		<div className="bin">
 			<i className="fas fa-angle-right fa-9x color"></i>
 			<div className="product-bin">
 				{this.renderBin()}
 			</div>
 		</div>
 		);
 };
};

const mapStateToProps = state => {
	return {boughtProducts: state.boughtProducts};
};

export default connect(mapStateToProps)(Bin);

Answer 1

const productsReducer = (products = data, action) => {
if(action.type === 'BUY_PRODUCT') {
    return products.map(product => {
        if(product.code === action.payload.code) {
            if(product.quantity === 1) {
                product.quantity--;
                product.image = "https://i.ibb.co/w0sSgpd/sold-out.png";
                return product;
            };      
            product.quantity--      
            return product;
        };
        return product; 
    });
}

return products;
};

这部分代码更改了图像网址，并且“产品”页面也使用同一图像。因此，更改将反映有作为。您可以通过有条件地呈现这样

修复

<img alt="blablabla" src={product.quantity === 0 ? `sold-out-image-path`: product.image} />

如果您对所有产品使用相同的售罄图像，则此方法会很好地工作。如果售罄的图片取决于产品，则可以在内部数据中添加属性[]。

{code: '110', price: 10, name: 'KitKat', quantity: 5, image: 'https://i.ibb.co/41dKJ8r/kitkat.jpg', soldOutImage: 'product-specific-sold-out-image'},

和然后写这样的UI代码

<img alt="blablabla" src={product.quantity === 0 ? product.soldOutImage: product.image} />

我希望我是有帮助的： - ）

React-Redux：不同减速器的状态变化

1 个答案: