0
166
ViewsTome el valor de entrada del formulario de envío y guárdelo en la tienda redux para usarlo más tarde
Estoy haciendo un proyecto donde la primera pantalla es una entrada simple para poner el nombre, y luego pasa a otra pantalla (otro componente) donde necesito usar el valor que el usuario puso en la entrada antes para mostrar contenido personalizado . Traté de hacerlo con Redux pero tengo dificultades para almacenar el valor de entrada en Redux Store y luego usar ese valor en otro componente. Me gustaría saber cómo podría almacenar este valor y luego usarlo en otro componente (honestamente, no tengo idea de cómo hacerlo). Si alguien quiere, también puedo mostrar el código del otro componente.
mi primer componente (donde el usuario pone su nombre):
import React, {useState, useEffect} from "react"; import "../_assets/signup.css"; import "../_assets/App.css"; import { Link } from 'react-router-dom'; function Signup() { const [name, setName] = useState('') const [buttonGrey, setButtonGrey] = useState('#cccccc') useEffect(() => { if(name!== '') { setButtonGrey("black") } else { setButtonGrey('#cccccc') } }, [name]) const handleSubmitForm= (e) => { e.preventDefault() store.dispatch({ type: 'SAVE_USER', payload: name, }) console.log({name}) } const handleChangeName = (text) => { setName(text) } return ( <div className="container"> <div className="LoginBox"> <form onSubmit={handleSubmitForm}> <h2>Welcome to codeleap network</h2> <text>Please enter your username</text> <input type="text" name="name" value={name} onChange = {e => handleChangeName(e.target.value)} placeholder="Jane Doe" /> <div className="button"> <Link to="/main"> <button type="submit" style={{backgroundColor: buttonGrey}} disabled={!name} > ENTER </button> </Link> </div> </form> </div> </div> ); } export default Signup;mi tienda.js:
import { createStore } from 'redux'; const reducer = (state= (''), action) => { switch(action.type) { case 'SAVE_USER': { state = {...state, name: action.payload} } default: return state } } const store = createStore(reducer) export {store}Bóveda
1 answers
Answer question0
Primero, sugiero usar Redux-Toolkit . Hace que ponerse de pie y configurar una tienda React redux sea casi demasiado fácil.
Aquí está la guía de inicio rápido
Crear/convertir a una porción de estado. Cuando crea un segmento, está declarando el nombre del segmento de estado, las acciones y las funciones reductoras al mismo tiempo, todo a la vez.
import { createSlice } from "@reduxjs/toolkit"; const userSlice = createSlice({ name: "user", initialState: "", reducers: { saveUser: (state, action) => action.payload } });Crear y configurar la tienda.
import { configureStore } from "@reduxjs/toolkit"; import userSlice from "../path/to/userSlice"; const store = configureStore({ reducer: { user: userSlice.reducer } });Renderice un
Providery pase la prop de lastore.import { Provider } from "react-redux"; <Provider store={store}> ... app component ... </Provider>
A partir de aquí, se trata de importar la función de dispatch y seleccionar el estado, use useDispatch y useSelector de react-redux para esto.
Inscribirse
import { useDispatch } from "react-redux"; function Signup() { const dispatch = useDispatch(); // <-- dispatch function const navigate = useNavigate(); const [name, setName] = useState(""); const handleSubmitForm = (e) => { e.preventDefault(); dispatch(userSlice.actions.saveUser(name)); // <-- dispatch the action navigate("/main"); }; const handleChangeName = (text) => { setName(text); }; return ( ... ); }Ejemplo Componente principal:
import { useSelector } from "react-redux"; const Main = () => { const user = useSelector((state) => state.user); // <-- select the user state return ( <> <h1>Main</h1> <div>User: {user}</div> </> ); }; 