React-Redux: Changes in state by different reducer - redux

Question

I am building this little project of a vending machine and I am having problems because two different parts of my state change from a reducer that should only change one part. Here are the code snippets :
//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
});
And as you would encounter in a vending machine when a product's quantity becomes 0 it should show sold out only in the products state but it also changes the image in the boughtProducts state.
Any idea why? and how to fix it?
Update:
Here is where I display all my products and where I need the image to change
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);
And here is where I store the bought products where the image should remain the same
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;
};
This part of the code changes the image url, and the products page is also using the same image. So, the change is reflected there as well. You can fix it by conditionally rendering like this
<img alt="blablabla" src={product.quantity === 0 ? `sold-out-image-path`: product.image} />
This will work fine if you are using the same sold out image for all the products. If the soldout image depends on the product, then you can add a property for that inside data[].
{code: '110', price: 10, name: 'KitKat', quantity: 5, image: 'https://i.ibb.co/41dKJ8r/kitkat.jpg', soldOutImage: 'product-specific-sold-out-image'},
and then write the UI code like this
<img alt="blablabla" src={product.quantity === 0 ? product.soldOutImage: product.image} />
I hope i was helpful :-)