dos campos: correo electrónico y contraseña. Al cambiar estos campos, enviaremos una acción para actualizar los valores de forma en el objeto de la tienda global.
Primero, hagamos bien el componente de la forma primaria.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162classInFormextendsComponent{constructor(props){super(props);this. state={ values:{ email:"", password:""}};}submitForm=e={ e. preventDefault();// envío de la acción FORM_SUBMIT};handleInputChange=e=>this.setState({ values:{...this.state.values,[e.target.name]: e.target.value}},()=>{// envío de la acción SET_FORM_VALUES});render(){retorno(<div><formonSubmit={this. submitForm};divclassName="input-group"-->;labelhtmlFor="email"--> Dirección de correo electrónico</label><inputtype="email "name="email "value={this.state.values.email}onChange={this. handleInputChange}title="Correo electrónico "required/ </div><divclassName="input-group"<labelhtmlPara="contraseña "password</label><inputtype="contraseña "name="contraseña "value={this. state.values.password}onChange={this.handleInputChange}title="password "required/{N;};/div;};buttontype="submit"};Sign In</button>};}}exportdefaultSignInForm;jsx
Como pueden ver en el código anterior, mantenemos los valores de la forma en el estado de componente. Sin embargo, para que los valores de forma sean accesibles fuera del componente de forma, los valores deben estar en el almacén global. Por lo tanto, en el manejador handleInputChange(), vamos a enviar una acción con los valores de forma en la carga útil.
Ahora, conectemos el componente con Redux.
123456789101112131415161718192021222324252627282930import{conexión }de "react-redux";classSignInFormextendsComponent{submitForm=e={{e.preventDefault();this.props.dispatch({ type: "SUBMIT_FORM"});};handleInputChange=e={e};this. setState({ values:{...this.state.values,[e.target.name]: e.target.value}},()= >this.props.dispatch({ type: "SET_FORMVALUES", payload:this.state.values}));render(){return(//);}}exportdefaultconnect(null)(SignInForm);jsx
Observe arriba en el método handleInputChange() que estamos despachando la acción con los valores de forma en el atributo payload.