Reactjs and Redux state does not change

Asked

Viewed 199 times

0

Good afternoon guys I’m beginner and I’m having a problem when it comes to updating my state could help me or give some hint on how I can fix this

Home js.

import React from 'react';
import {Form, Button,Container} from 'react-bootstrap'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'


function getUsuario(usuario,action){
  return {
    type:'PEGAR_USUARIO',
    usuario:action.usuario,
  }
}

const FormLogin = ({usuario,dispatch}) => (

  <Container>
   <Form>
    <Form.Group controlId="formBasicEmail">
      <Form.Label>Usuario</Form.Label>
      <Form.Control type="text" placeholder="Usuario"  onChange={(e)=>{ e.target.value}} />
    </Form.Group>

    <Form.Group controlId="formBasicPassword">
      <Form.Label>Senha</Form.Label>
      <Form.Control type="password" placeholder="Senha" />
    </Form.Group>
    <Form.Group controlId="formBasicCheckbox">
    </Form.Group>
<Link to="/home" onClick={()=> {dispatch(getUsuario(usuario))}}>
    <Button variant="primary" type="submit"  >
      Entrar
    </Button>
    </Link >
  </Form >
  </Container>
)

export default connect(state => ({usuario: state.usuario}))(FormLogin);

store js.

import {createStore} from 'redux'


const INITIAL_STATE =
{
    usuario: ''
}
function reducer(state = INITIAL_STATE , action){
    console.log(action)
    if(action.type === 'PEGAR_USUARIO'){
        return {...state, usuario:action.usuario}
    }
    return state;
}
const store = createStore(reducer);

export default store;
javascript react redux

  • But what is the specific error? If you log in to Reset, you don’t get there?

  • What I need is for the input value to be stored in my state but it does not store the state value never changes

1 answer

2


I converted to a model in React-Hooks which is much easier to understand than in the "archaic model".

import React, { useEffect, useState } from 'react'
import { Container, Form, Button } from 'react-bootstrap'
import { useSelector, useDispatch } from 'react-redux'
import 'bootstrap/dist/css/bootstrap.min.css'

const App = () => {
    const [user, setUser] = useState({
        username: '',
        password: ''
    })
    const { usuario } = useSelector(store => store) // destructure, isso é = const usuario = useSelector(store => store.usuario), é usado para não repetir a mesma propriedade
    const dispatch = useDispatch()
    useEffect(() => {
        console.log(usuario)
    }, [usuario]) // quando atualizar a variável usuario ele vai logar isso
    return (
        <Container>
        <Form>
         <Form.Group controlId="formBasicEmail">
             <Form.Label>Usuario</Form.Label>
             <Form.Control type="text" placeholder="Usuario" onChange={e => setUser({ ...user, username: e.target.value })} />
         </Form.Group>

         <Form.Group controlId="formBasicPassword">
             <Form.Label>Senha</Form.Label>
             <Form.Control type="password" placeholder="Senha" />
         </Form.Group>
         <Form.Group controlId="formBasicCheckbox">
         </Form.Group>
         <Button variant="primary" type="button" onClick={() => dispatch({ type: 'PEGAR_USUARIO', usuario: user })}>
             Entrar
         </Button>
     </Form >
     </Container>
    )
}

export default App

Aqui como ficou o resultado (eu coloquei o redux-logger para garantir, mas era desnecessário por causa do useEffect) I assumed you’d use the state usuario to save both username and password. Sorry if I got it wrong. If you have any questions you may ask.

React Hooks Link

Browser other questions tagged javascript react redux

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