Зачем вообще в товаре свойство
addedToCart?
Представьте, что у вас в приложении есть или будет пагинация. Вы перешли вперед-назад и загрузили товары заново. Ключи при этом будут потеряны.
Сделайте селекторы
checkIsProductAddedToCartSelector и
isProductAddedToCartSelector. Первый пусть возвращает функцию принимающую
id товара и возвращающую
true если товар найден в
store корзины. Второй пусть принимает
id товара и возвращает булево значение, если товар найден или не найден в
store корзины. Используйте для этого
reselect.
И добавляйте их в
mapStateToProps в
connect.
В списке можно вызывать так:
const ProductsList = ({
productsList,
checkIsProductAddedToCart,
}) => (
<ul>
{productsList.map(product => (
<Product
addedToCart={checkIsProductAddedToCart(product.id)}
product={product}
/>
))}
</ul>
);
const mapStateToProps(state => ({
productsList: productListSelector(state),
checkIsProductAddedToCart: checkIsProductAddedToCartSelector(state),
}));
export default connect(mapStateToProps)(ProductsList);
В детализации так:
const mapStateToProps((state, ownProps) => ({
isAddedToCart: isProductAddedToCartSelector(state, ownProps),
}));
export default connect(mapStateToProps)(ProductDetails);
Примерные реализации селекторов:
import { createSelector } from 'reselect';
const cartSelector = state => state.cart;
const cartProductsSelector = createSelector(
cartSelector,
cart => cart.products,
);
// возвращает функцию, принимающую id, которую можно использовать при построении списков
const checkIsProductAddedToCartSelector = createSelector(
cartProductsSelector,
products => id => products.some(product => product.id === id),
);
const productIdSelector = (_, props) => props.product.id;
// возвращает булево значение, важно чтобы в компоненте было свойство product
const isProductAddedToCartSelector = createSelector(
cartProductsSelector,
productIdSelector,
(products, id) => products.some(product => product.id === id),
);
Добавление товара в корзину в "утке" cart:
Средний
Сложный