使用 connect() 响应 Redux 表单？

Question

i am trying to build a react redux form using the connect() instead useSelector and useDispatch. I managed to display the list of data and to reset the forms. But i didn't manage to send data. Here is the code:

 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;

My problems comes from in mapDispatchToProps, i don't know what to do for the function Add

Answer 1

Your actions should be the ones defining the action type and you should call them in the mapDispatchToProps , not pass them as part of the action.

So your addForm should be something like

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

and in your mapDispatchToProps it should be like

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

---

But you have the same problem with all your dispatching

for example the Name should be

action

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

mapDispatchToProps

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