如何在redux react js中通过点击按钮传递数据

Question

我是redux的新手。我有三个组件是TextField, Button和View。我只是将文本字段数据存储在redux configureStore中，如何通过按钮单击从按钮组件到视图组件传递数据。我正在使用上下文如何更改redux。

Codesandbox链接使用redux

这里我累了，但我想只显示当按钮点击。

CodeSanbox链接使用上下文

Answer 1

这是我为你准备的解决方案

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

Answer 2

根据您的Codesandbox链接使用redux Code

我认为你必须从import updateValue from "./features/Updater";改为import { updateValue } from "./features/Updater";

这对我来说很好

你当前的App.js文件

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

你的App.js文件应该如下所示

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

您还可以从给出的doc redux工具包解释中更好地理解redux工具包，以便更好地理解

Answer 3

您的reducer有以下结构:

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

但是你正在触发一个像这样的动作:

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

当它应该是这样的:

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