React：我想提交一个表单并想通过钩子（useSelector和useDispatch）将数据保存在redux store中

Posted 2023-03-30

【中文标题】React：我想提交一个表单并想通过钩子（useSelector和useDispatch）将数据保存在redux store中

【英文标题】：React: I want to submit a form and want to save data in redux store through hooks (useSelector and useDispatch)

【发布时间】：2019-11-20 13:42:32

【问题描述】：

React：我想提交一个表单并想通过钩子（useSelector 和 useDispatch）将数据保存在 redux 存储中 让我知道是否需要其他东西我会上传 我需要这个问题的帮助 我会很感激的

import React,  useState  from "react";
import  useDispatch  from "react-redux";
import 
  Button,
  Form,
  FormGroup,
  Label,
  Input,
  Container,
  Col
 from "reactstrap";
import "./style.scss";

import  addUserAction  from "../../store/reducers/registerReducer.js";

const Register = () => 
  const [user, setUser] = useState("");
  const usedispatch = useDispatch();
  const addUser = user => usedispatch(addUserAction(user));

  const submitHandler = e => 
    e.preventDefault();
    console.log(user);
    if (user.trim() === "") return;
    addUser(user);
  ;
  const onChange = e => 
    //console.log(e.target.value);
    setUser(e.target.value);
  ;

  return (
    <Container className="register">
      <h2>Register</h2>
      <Form onSubmit=submitHandler className="form">
        <Col>
          <FormGroup>
            <Label>Full Name</Label>
            <Input
              type="text"
              name="fullname"
              id="fullname"
              value=user.fullname
              placeholder="Full Name"
              onChange=onChange
            />
          </FormGroup>
        </Col>

        <Col>
          <FormGroup>
            <Label>Email</Label>
            <Input
              type="email"
              name="email"
              value=user.email
              id="email"
              placeholder="[e-mail]"
              onChange=onChange
            />
          </FormGroup>
        </Col>
        <Col>
          <FormGroup>
            <Label for="examplePassword">Password</Label>
            <Input
              type="password"
              name="password"
              value=user.password
              id="password"
              placeholder="********"
              onChange=onChange
            />
          </FormGroup>
        </Col>
        <Button>Submit</Button>
      </Form>
    </Container>
  );
;

export default Register;
//////////////////////////////////////////////////////////////// reducer
const initialState = 
  fullname: "",
  email: "",
  password: ""
;

function userRegister(state = initialState, action) 
  switch (action.type) 
    case "ADD_USER":
      return 
        ...state
      ;
    default:
      return state;
  


export default userRegister;

// Actions
export const addUserAction = user => (
  type: "ADD_USER",
  payload: user
);

React：我想提交一个表单并想通过钩子（useSelector 和 useDispatch）将数据保存在 redux 存储中 让我知道是否需要其他东西我会上传 我需要这个问题的帮助 我会很感激的

【参考方案1】：

您的user 状态是一个字符串，并作为字符串更新。但是您将其作为对象user.fullname 访问。

其次，您使用空的用户对象而不是表单值提交您的 redux 操作：

addUser(
  fullname: "",
  email: "",
  password: ""
);

要么更改您的表单以对每个值使用不同的useState，或者更好地将当前user 状态更改为对象。然后改为发送该对象：

const [user, setUser] = useState(
  fullname: "",
  email: "",
  password: ""
);

const onChange = e => 
  setUser(...user, [e.target.name]: e.target.value);
;

addUser(user);

最后，您没有在 reducer 中使用有效负载，只是返回状态。像这样返回它来保存用户：

case "ADD_USER":
  return action.payload;

【参考方案2】：

<Input
          type="email"
          name="email"
          value=user.email
          id="email"
          placeholder="[e-mail]"
          onChange=onChange
        />

我应该在这里赋予什么价值