时间戳

首页 > 解决方案 > action redux 未定义，未获取数据

javascript - action redux 未定义，未获取数据

问题描述

我正在尝试创建一个将贷款请求发送到多封电子邮件的函数，但是 redux 操作出现问题没有收到数据。

这是 action.js 代码库：

export const updateUserLoanRecipientRequest = ({ recipientRequestDetails }) => (
  dispatch,
  getState,
) => {
  const state = getState();
  const userAuthToken = selectUserAuthToken(state);
  const currentLoanRequest = selectCurrentLoanRequest(state);
  const joinedLoanDetails = {
    ...currentLoanRequest.recipientRequestDetails,
    ...recipientRequestDetails,
  };
  console.log("recipientRequestDetails: ", recipientRequestDetails)
  return updateLoanRequest({
    userAuthToken,
    loanDetails: { ...currentLoanRequest, recipientRequestDetails: joinedLoanDetails },
  })
    .then(data => {
      dispatch({ type: UPDATE_LOAN_REQUEST, payload: data });
      return data;
    })
    .catch(error => {
      console.log("ERROR UPDATING USER LOAN");
      triggerGenericNotification(dispatch, error);
    });
};

这是我发送数据的按钮功能：

  const [inputFields, setInputFields] = useState([
    { id: uuidv4(), relationship: 'parent', initiatorMessage: '', email: '' }]);

  const sendNow = () => {
    const recipientPayloadToUpdate = inputFields?.map(i => {
      return i
    })

    console.log("recipientPayloadToUpdate: ", 
      recipientPayloadToUpdate);


updateUserLoanRecipientRequest(recipientPayloadToUpdate).then((res) => {
     }

       }

这是我的 console.log(recipientPayloadToUpdate)：

recipientPayloadToUpdate:
0:
email: "nnhan3640@gmail.com"
id: "f6625773-79c6-48c4-bc16-7c63acb5cc93"
initiatorMessage: ""
relationship: "parent"

并且 console.log 的操作是未定义的。

有谁知道我为什么没有定义？

标签： javascriptreactjsreduxreact-redux

解决方案

updateUserLoanRecipientRequest从具有属性的对象形式的参数中解构recipientRequestDetails。您正在传入一个没有该属性的对象。

你很可能想通过

updateUserLoanRecipientRequest({ recipientRequestDetails: recipientPayloadToUpdate})

此外，您很可能打算发送该操作：

  const dispatch = useDispatch();
  const sendNow = () => {
    // ...
    dispatch(updateUserLoanRecipientRequest({ recipientRequestDetails: recipientPayloadToUpdate})).then(...)

如果您在connect这里使用，这在技术上确实有效（只要您使用updateUserLoanRecipientRequestfrom props），但我真的想鼓励您使用react-redux钩子（在这种情况下useDispatch，而不是connect.connect几乎是与类组件兼容的遗留 api在此刻。

另外，我想指出的是，您通常在这里编写一种非常过时的 Redux 风格，我们不再教授用于生产用途。现代 Redux 不使用 switch..case reducer、ACTION_TYPEs、不可变的 reducer 逻辑connect。
我强烈建议您阅读官方 Redux 教程以了解现代实践：https ://redux.js.org/tutorials/essentials/part-1-overview-concepts

推荐阅读