How to pass data by button click in redux react js

user_19126995 0
Viewed 310

I'm new to redux. I have three components are TextField , Button and View. I just stored textfield data in redux configureStore, How to pass data by button click from button component to view component. Im using context how to change in redux.

Codesandbox link using redux

Here I tired but I want to diplay only when button click.

CodeSanbox Link using Context

react-context react-redux redux reactjs javascript
3 Answers

Here is the solution I make ready for you

App.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>
  );
}
user_45546230

As per your Codesandbox link using redux Code.

I think you have to change from import updateValue from "./features/Updater"; to import { updateValue } from "./features/Updater";

And it works fine for me

Your current App.js file

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>
  );
}

Your App.js file should look like below

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>
  );
}

You can also get a better understanding of the redux toolkit from this given doc Redux toolkit explaination for a better understanding

user_185415380

Your reducer has the following structure:

initialState: { value: { text: "" } }

But you are triggering an action like this:

dispatch(updateValue("youy text here"));

When it should be like this:

dispatch(updateValue({ text: "your text here" }));
user_141227780
Related