Soy nuevo en redux . Tengo tres componentes: TextField, Button y View. Acabo de almacenar datos de campo de texto en redux configureStore, Cómo pasar datos haciendo clic en un botón desde el componente del botón para ver el componente. Estoy usando context cómo cambiar en redux.
Enlace Codesandbox usando redux
Aquí me cansé, pero quiero mostrar solo cuando haga clic en el botón.
Aquí está la solución que preparo para ti.
Aplicación.js
import "./styles.css"; import Tfield from "./Tfield"; import ButtonSubmit from "./ButtonSubmit"; import TypoValue from "./TyoValue"; import React, { useCallback, useEffect, useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import { updateValue } from "./features/user"; export default function App() { const dataFromRedux = useSelector((state) => state.user.value); console.log(dataFromRedux); // useRef to prevent re-rendering const inputRef = React.useRef(undefined); const dispatch = useDispatch(); const handleUpdate = () => { dispatch(updateValue(inputRef.current.value)); }; return ( <div className="App"> <Tfield inputRef={inputRef} /> <ButtonSubmit handleUpdate={handleUpdate} /> <TypoValue /> </div> ); }Tfield.js
import "./styles.css"; import * as React from "react"; import TextField from "@mui/material/TextField"; export default function Tfield({ inputRef }) { console.log("Textfield"); return ( <div> <TextField inputRef={inputRef} label="Enter Name" /> </div> ); }BtnPage.js
import React from "react"; import { useDispatch, useSelector } from "react-redux"; import { updateValue } from "./features/Updater"; export default function BtnPage({handleUpdate}) { return ( <div> <button onClick={() => handleUpdate()}> Update </button> </div> ); }TFPage.js
import React, { useEffect, useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import { updateValue } from "./features/Updater"; export default function TFPage({myTxt, setMyTxt}) { //const myData = useSelector((state) => state.update.value); // const [myTxt, setMyTxt] = useState(myData.text); //const dispatch = useDispatch(); const handleChange = (char) => { setMyTxt(char); //dispatch(updateValue(myTxt)); }; // useEffect(() => { // // console.log('useEff - render'); // dispatch(updateValue({ text: myTxt })); // }, [myTxt]); return ( <div> <input value={myTxt} placeholder="Enter Some Text" onChange={(e) => handleChange(e.target.value)} /> </div> ); }ViewPage.js
import React from "react"; import { useSelector } from "react-redux"; export default function ViewPage() { const myData = useSelector((state) => state.update.value); console.log(myData); return ( <div> <h1> {myData} </h1> </div> ); }Según su enlace Codesandbox usando el código redux .
Creo que tienes que cambiar de import updateValue from "./features/Updater"; para import { updateValue } from "./features/Updater";
Y me funciona bien
Su archivo App.js actual
import "./styles.css"; import TFPage from "./TFPage"; import BtnPage from "./BtnPage"; import ViewPage from "./ViewPage"; import { useSelector, useDispatch } from "react-redux"; import updateValue from "./features/Updater"; import { useState, React } from "react"; export default function App() { const myData = useSelector((state) => state.update.value); const [myTxt, setMyTxt] = useState(myData.text); const dispatch = useDispatch(); const handleUpdate = () => { console.log(myData); dispatch(updateValue(myTxt)); }; return ( <div className="App"> <TFPage setMyTxt={setMyTxt} myTxt={myTxt} /> <BtnPage handleUpdate={handleUpdate} /> <ViewPage /> </div> ); }Su archivo App.js debería verse como a continuación
import "./styles.css"; import TFPage from "./TFPage"; import BtnPage from "./BtnPage"; import ViewPage from "./ViewPage"; import { useSelector, useDispatch } from "react-redux"; import { updateValue } from "./features/Updater"; import { useState, React } from "react"; export default function App() { const myData = useSelector((state) => state.update.value); const [myTxt, setMyTxt] = useState(myData.text); const dispatch = useDispatch(); const handleUpdate = () => { console.log(myData); console.log(myTxt); dispatch(updateValue(myTxt)); }; return ( <div className="App"> <TFPage setMyTxt={setMyTxt} myTxt={myTxt} /> <BtnPage handleUpdate={handleUpdate} /> <ViewPage /> </div> ); }También puede obtener una mejor comprensión del kit de herramientas redux de este documento dado Explicación del kit de herramientas Redux para una mejor comprensión
Su reductor tiene la siguiente estructura:
initialState: { value: { text: "" } }Pero estás desencadenando una acción como esta:
dispatch(updateValue("youy text here"));Cuando debería ser así:
dispatch(updateValue({ text: "your text here" }));