¿Qué hay de malo en mi aplicación Redux reactr, ya que no está dando las cosas como se espera?

Empecé a usar redux y sólo para probar cosas empecé a usar combineReducers para un enfoque más estructurado de diseñar cosas, pero no funciona lo mismo que todo el mundo sugirió. He estado rascando mi cabeza hacia fuera que lo que está mal en mi enfoque mientras seguí cada punto que está en su sitio web oficial.

index.js

import React from 'react';
import {createStore}  from 'redux';
import {Provider} from 'react-redux';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reducer from './reducer';
import Welcome from './Components/Welcome';

const store=createStore(reducer);

ReactDOM.render(
  
    
    
  ,
  document.getElementById('root')
);

Bienvenido.js archivo

import React from 'react'
import {connect} from 'react-redux';
import {FIRST} from '../Actions';
function Welcome({count,dispatch})   {
    dispatch({type:FIRST});
    return (
        

            
 Wow it's great {count}
        
    )
}

const mapStateToProps=(store) =>({
count:store.count
})

export default connect(mapStateToProps)(Welcome);

loginsearch.js

import {FIRST} from './Actions';
const initialstore={
    count:1,
    total:1
}

function loginreducer(state=initialstore,action)
{
if(action.type === FIRST)
{ 
  return{...state,count:0};
}
return state;
}

export default loginreducer;

searchreducer.js

const initialstore={
item:1,
search:1
}


function searchreducer(state=initialstore,action)
{
    return state;
}
export default searchreducer;

reducer.js

import {combineReducers} from 'redux';
import  loginreducer from './loginreducer';
import searchreducer from './searchreducer';

export default combineReducers({
loginreducer,
searchreducer
})

y cuando yo console.log(count) en Welcome.js después dispatch({type:FIRST})

me pongo indefinido, sin embargo en la aplicación debo conseguir Wow es genial 0

Pregunta hecha hace 3 años, 4 meses, 24 días - Por devninjax

3 Respuestas:

• El problema es que combinaste los reductores, pero al llamar al estado de mapStateToProps, te olvidaste de añadir qué reductor estás refiriendo, así que te deshaces.

  He añadido llaves a tus reductores, así que puede ser mucho más fácil llamar afuera. Y actualizado el mapaStateToProps

  Aquí está el ejemplo para solucionar su problema,

  /*reducer.js*/
  import {combineReducers} from 'redux';
  import  loginreducer from './loginreducer';
  import searchreducer from './searchreducer';
  
  export default combineReducers({
  lr: loginreducer, // <== Check this line
  sr: searchreducer // <== Check this line
  })
  
  
  /*welcome.js*/
  const mapStateToProps=(store) =>({
  count:store.lr.count, // <== Check this line
  })
  
  export default connect(mapStateToProps)(Welcome);
  

  Respondida el Dec 21, 2020 a las 07:56 - por binarybuilder

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El problema que estás experimentando en tu aplicación Redux React se debe a un error en la forma en que estás pasando el estado del store a tu componente Welcome.

  En tu archivo Welcome.js, estás intentando acceder a store.count, pero estás pasando el estado incorrectamente en tu mapStateToProps. Debes corregir tu mapStateToProps para que devuelva el estado correcto.

  Aquí está la corrección que necesitas hacer en tu archivo Welcome.js:

  jsx
  import React from 'react';
  import { connect } from 'react-redux';
  import { FIRST } from '../Actions';
  
  function Welcome({ count, dispatch }) {
    // aquí no es necesario llamar a dispatch directamente cuando se renderiza el componente
    return (
      
  
        
   Wow it's great {count}
      
    );
  }
  
  const mapStateToProps = (state) => ({
    count: state.loginreducer.count // Corregir el acceso al estado correcto
  });
  
  export default connect(mapStateToProps)(Welcome);
  

  Además, en tu archivo reducer.js, al combinar tus reducers, estás creando un objeto con las propiedades loginreducer y searchreducer. Por lo tanto, debes acceder a ellos correctamente dentro de tu mapStateToProps en el archivo Welcome.js.

  Una vez que realices estos cambios, deberías poder ver el mensaje "Wow it's great 0" en tu componente Welcome. ¡Espero que esto te ayude a solucionar el problema en tu aplicación!

  Respondida el Dec 22, 2020 a las 07:56 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El problema con tu código es que has usado el nombre de la variable incorrecto en tu Provider componente. Debería ser store en lugar de {store}.

  Aquí tienes el código corregido:

  js
  ReactDOM.render(
    
      
      
    ,
    document.getElementById('root')
  );
  

  Además, hay un problema en tu loginreducer. Estás intentando mutar el estado directamente en el reductor, lo cual es una mala práctica. En su lugar, debes devolver un nuevo objeto con los cambios deseados.

  Aquí tienes el código corregido:

  js
  function loginreducer(state = initialstore, action) {
    if (action.type === FIRST) {
      return { ...state, count: 0 };
    }
    return state;
  }
  

  Respondida el Dec 22, 2020 a las 08:05 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---