React-Redux: изменения в состоянии от другого редуктора - PullRequest
Новая
       4

React-Redux: изменения в состоянии от другого редуктора

0 голосов
/ 01 февраля 2019

Я строю этот маленький проект торгового автомата, и у меня возникают проблемы, потому что две разные части моего состояния меняются от редуктора, который должен менять только одну часть.Вот фрагменты кода: 

//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, оно должно показывать, что оно распродано только в состоянии товара, но это также меняет изображение в состоянии купленного товара..

Есть идеи, почему?и как это исправить?

Обновление:

Здесь я показываю все мои продукты и где мне нужно изображение, чтобы изменить 

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

1 Ответ

0 голосов
/ 01 февраля 2019 
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;
};

Эта часть кода изменяет URL-адрес изображения, и страница продуктов также использует то же изображение.Таким образом, изменение отражается и там.Вы можете исправить это путем условного рендеринга следующим образом: 

<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} />

Надеюсьмне было полезно: -)

...