-1
I’m starting at React-Redux and would like to pick up a props of a component as my Reducer value
I will demonstrate my code : product
import { createSlice } from '@reduxjs/toolkit'
export const produtoNomeSlice = createSlice({
name: 'produtoNome',
initialState: {
value: ''
},
reducers: {
addNome: state => {
state.value = addNome.value
}
}
});
export const {addNome} = produtoNomeSlice.actions
export const selectProdutoNome = state => state.produtoNome.value
export default produtoNomeSlice.reducer
My component
function CardProduto (props) {
const count = useSelector(selectCount);
const produtoNome = useSelector(selectProdutoNome);
const dispatch = useDispatch()
function addCarrinho () {
() => dispatch(addNome())
}
return (
<div className="container-fluid">
<div className="card shadow-lg">
{ /* foto do produto */}
<img src={props.foto} alt="foto do produto"/>
{ /* foto do produto */}
<h5 className="nomeProduto text-center pt-2"><b>{props.prodNome}</b></h5>
<div className='container text-center'>
<p><b>Descrição: </b></p>
<p>{props.prodDescricao} </p>
<h3><b>Preço: </b></h3>
<p>R$: {props.prodPreco} </p>
</div>
<p className="quantidade"><b>Quantidade:</b></p>
{ /* controles cartão Produto */}
<div class="input-group mb-3 container">
<button class="btn btn-outline-secondary" type="button" onClick={() => dispatch(decrement())} >-</button>
<button class="btn btn-outline-secondary" type="button" onClick={() => dispatch(increment())} >+</button>
<input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" value={count}/>
<button type="button" class="btn btn-warning" >Adicionar ao carrinho</button>
<Link to="/carrinho">
<button
type="button"
class="btn btn-danger mt-5 bottom-0 start-50 translate-middle-x"
onClick={addCarrinho()}
>
Ir para o carrinho
</button>
</Link>
</div>
</div>
</div>
);
}
function mapStateToProps(state){
return {
quantidade: state.quantidade
}
}