问题:React Redux - 提交时不会触发动作

我试图在 React 中对表单提交触发 Redux 操作,但它什么也不做,而且根本没有显示任何错误。

行动:

export const addLead = (lead) => (dispatch) => {
const url = 'http://localhost:8000/api/leads/'
axios.post(url, lead)
    .then(res => {
        dispatch({
            type: ADD_LEAD,
            payload: res.data
        });
    }).catch(err => console.log(err));

};

减速机:

      case "ADD_LEAD":
      return {
          ...state,
          leads: [...state, action.payload]
      }

这是我的表单组件:

const Form = () => {

const [formData, setFormData] = useState({
    name: '',
    email: '',
    message:''
})

const {name, email, message} = formData;

const onChange = (e) => {
    setFormData({...formData, [e.target.name]: e.target.value});
}

const onSubmit = (e) => {
    e.preventDefault();
    console.log("submit")
    const {name, email, message} = formData;
    const lead = {name, email, message}
    console.log('Leads: ',lead)
    addLead(lead)
}

return(
   <form onSubmit={onSubmit}>
      .... Form .... 
   </form>

export default connect(null, {addLead})(Form);

如果我在 Redux 开发工具中提交表单,我不会在控制台中看到操作或任何错误。我可以在 console.log 和“提交”中看到正确的数据,因此 onSubmit 函数被触发。知道为什么它不起作用吗?

解答

您需要使用 props 中的addLead,这意味着您需要确保从Form组件的props参数中获取它:

const Form = ({addLead}) => {
  // Component code stays the same
}

重要的是要记住connect会将状态映射到道具并将调度映射_到道具_。