Itens Reducer
const itensSlice = createSlice({
name: "itens",
initialState,
reducers: {
mudarFavorito: (state, { payload }) => {
state = state.map((item) => {
item.favorito = item.id == payload ? !item.favorito : item.favorito;
});
},
},
});
export const { mudarFavorito } = itensSlice.actions;
Componente Item
function Item(props) {
const {
id,
titulo,
foto,
preco,
descricao,
favorito
} = props
const dispatch = useDispatch();
function handleFavorite() {
dispatch(mudarFavorito(id));
}
return (
<div className={styles.item}>
<div className={styles['item-imagem']}>
<img src={foto} alt={titulo} />
</div>
<div className={styles['item-descricao']}>
<div className={styles['item-titulo']}>
<h2>{titulo}</h2>
<p>{descricao}</p>
</div>
<div className={styles['item-info']}>
<div className={styles['item-preco']}>
R$ {preco.toFixed(2)}
</div>
<div className={styles['item-acoes']}>
{favorito
? <AiFillHeart {...iconProps} color='#ff0000' className={styles['item-acao']} onClick={handleFavorite} />
: <AiOutlineHeart {...iconProps} className={styles['item-acao']} onClick={handleFavorite} />
}
<FaCartPlus
{...iconProps}
color={true ? '#1875E8' : iconProps.color}
className={styles['item-acao']}
/>
</div>
</div>
</div>
</div>
)
}
export default Item