0

Buenas tardes amigos, me presento ante esta comunidad, tengo una pregunta espero puedan aclarármela,

¿Cómo hago para mostrar el estado inicial del store en react-redux?

Tengo un simple componente con un <h1> en react, el cual le voy a colocar un onClick para que al darle click me cambie ese título por otro, en el store tengo como estado inicial text:"titulo"; ¿cómo hago para mostrar este título en la etiqueta <h1> que tengo en react?

Aquí el código del componente:

import React from 'react'

import {connect} from 'react-redux'

class TodoApp extends React.Component {


    render() {

        return(
            <div>
                <h1 onClick={this.cambio}> {this.props.text} </h1>
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        text: state.text
    }
}

const mapDispatchToProps = dispatch => {
    return {
        cambio(text) {
            dispatch({
                type: "CAMBIAR",
                text:"se cambio"
            })
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)

2 respuestas 2

0
import React from 'react';

import { connect } from 'react-redux';

const TodoApp = ({ cambio, text }) => {
  return (
    <div>
      <h1 onClick={cambio}> {text} </h1>
    </div>
  );
};

const mapStateToProps = state => {
  return {
    text: state.text
  };
};

const mapDispatchToProps = dispatch => {
  return {
    cambio(text) {
      dispatch({
        type: "CAMBIAR",
        text:"se cambio"
      });
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);

Con un arrow component puedes probar así.

1
  • Hola Curro gracias por prestarle atencion a mi pregunta, sabes que implemente el consejo que me diste pero tampoco se me muestra el estado inicial, sera que estoy haciendo algo mal en algun otro componente? gracias nuevamente el 29 ago. 2017 a las 23:14
0

mira arreglé tu problema aqui: https://github.com/Neira1991/Problem97177StackOverflow me dices si te funciona, tienes varios problemas, debes asegurarte que estes dando los datos correctos al store de redux:

    const estadoInicial =
       {
           text: 'inicial'
       };

   const reducer = (state,action) => {
     switch (action.type) {
       case "CAMBIAR":
         return {text: action.text}
         break;
       default:
         return state;

     }
   }


   const store = createStore(
     reducer,
     estadoInicial,
     window.__REDUX_DEVTOOLS_EXTENSION__ &&                      window.__REDUX_DEVTOOLS_EXTENSION__()
   )

   ReactDOM.render(
     <Provider store={store}>
       <TodoApp />
     </Provider>, document.getElementById('root'));

segundo, el dispatch viene por props, asi que el onclick debe ser

    onClick={this.props.cambio}

y listo, esto funciona

1
  • muchas gracias por los comentarios, no pude responder antes ya que habia perdido conexion con el sitio. Gracias!! el 4 jul. 2018 a las 14:33

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.