reactjs - 用 connect() 反应 Redux 表单？

问题描述

我正在尝试使用 connect() 而不是 useSelector 和 useDispatch 来构建一个 react redux 表单。我设法显示数据列表并重置表格。但我没有设法发送数据。这是代码：

Reducer.js
const initialState = {
  tasks: {
    name: "",
    age: "",
    job: "",
  },

  list: [
    {
      id: 0,
      name: "Maillard",
      age: 35,
      job: "soldier",
    },
  ],
};

export const toDoReducer = (state = initialState, action) => {
  switch (action.type) {
    case "name":
      return {
        ...state,
        tasks: {
          name: action.payload,
        },
      };
    case "age":
      return {
        ...state,
        tasks: {
          age: action.payload,
        },
      };
    case "job":
      return {
        ...state,
        tasks: {
          job: action.payload,
        },
      };
    case "clear":
      return {
        ...state,
        tasks: {
          name: "",
          age: "",
          job: "",
        },
      };
    case "add":
      return {
        ...state,
        tasks: {
          ...state.tasks,
          id: state.list.length + 1,
        },
      };
    default:
      return {
        ...state,
      };
  }
};

export default toDoReducer;

import React from "react";
import { connect } from "react-redux";
import {
  setName,
  setAge,
  setJob,
  clearForm,
  addForm,
} from "../../redux/action";

export const Form = (props) => {

  return (
    <div>
      Name
      <input value={props.list.name} onChange={(e) => { props.Name(e.target.value) }} />
      Age
      <input value={props.list.age} onChange={(e) => { props.Age(e.target.value) }} />
      Profession
      <input value={props.list.job} onChange={(e) => { props.Job(e.target.value) }} />
      <div style={{ padding: 20 }}>
        <button onClick={props.Clear}>Reset</button>
        <button onClick={props.Add}>Envoyer</button>
      </div>
    </div>
  );
};

const mapDispatchToProps = (dispatch) => {
  return {

    Name: () => {
      dispatch({
        type: "name",
        setName,
      });
    },
    Age: () => {
      dispatch({ type: "age", setAge });
    },
    Job: () => {
      dispatch({
        type: "job",
        setJob,
      });
    },
    Clear: () => {
      dispatch({ type: "clear", clearForm, });
    },
    Add: () => {
      dispatch({)}
// My problem comes from the Add
<!-- begin snippet: js hide: false console: true babel: false -->

        type: "add",
        addForm
      })
    }
  };
};

const mapStateToProps = (state) => ({
  list: state.tasks,
});

export default connect(mapStateToProps, mapDispatchToProps)(Form);
// export default Form;

我的问题来自于 mapDispatchToProps，我不知道如何为函数添加

标签： reactjsredux

您的操作应该是定义操作的操作type，您应该在中调用它们mapDispatchToProps，而不是将它们作为操作的一部分传递。

所以你addForm应该是这样的

const addForm = () => ({
   type:'add'
});

在你的mapDispatchToProps应该是这样的

Add: () => dispatch(addForm()),

但是你所有的调度都有同样的问题

例如Name应该是

行动

const setName = (payload) => ({
   type:'name',
   payload
});

mapDispatchToProps

Name: (nameValue) => {
  dispatch(setName(nameValue));
},

reactjs - 用 connect() 反应 Redux 表单？

问题描述

解决方案

推荐阅读