Taking a props of a component as a global variable

Asked

Viewed 16 times

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

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.