React Redux - 提交时不会触发操作

Question

我试图在 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 和 'submit' 的状态中看到正确的数据，因此触发了 onSubmit 函数。知道为什么它不起作用吗？

Answer 1

您需要使用 props 中的 addLead，这意味着您需要确保从 [=] 的 props 参数中获取它13=]组件：

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

重要的是要记住 connect 会将状态 映射到 props 并将调度 映射到 props.

Answer 2

@Nick 是对的，我们没有看到完整的组件代码来判断 addLead 来自哪里。

1- addLead 需要使用从组件 props 消耗的（使用 react-redux connect 高阶函数连接）

2- for async actions 我看到你正在使用一个 thunk，但是当你在 thunk 中调用 axios 时你可能忘记了 return。


export const addLead = (lead) => (dispatch) => {

    const url = 'http://localhost:8000/api/leads/';

    return axios.post(url, lead)
        .then(res => {
            dispatch({
                type: ADD_LEAD,
                payload: res.data
            });
        })
        .catch(err => console.log(err));
}

React Redux - 提交时不会触发操作

React Redux - on submit wont fire action

javascript

action

reactjs

redux