Question

我正在尝试使带有钩子的redux-saga正常工作，但是我找不到找到使之按我想要的方式工作的方法。控制台告诉我，我只需要在我的功能主体组件中执行钩子，实际上我确实这样做了，但是它不起作用。

我尝试过的事情：

调用组件中的钩子
在formik的onSubmit回调中调用该钩子
试图返回回调以避免在core/notifications/index.ts

这是钩子：

function useUpdateNotifications(subscriptions: FormatedSubscription) {
  const dispatch = useDispatch();
  const formatSubscriptions = valuesIn(subscriptions);
  return () =>
    dispatch(Events.updateNotifications(formatSubscriptions as Subscription[]));
}

和我称之为的地方：

const formik = useFormik({
  initialValues: formatedValues,
  onSubmit: (values: FormatedSubscription) => {
    Core.updateNotifications(values);
  }
});

您可以在https://codesandbox.io/s/hook-formik-sagas-issues-3pq62

处找到具有相同问题的沙盒

core/notifications/index.tsx

我的通知钩子和所有逻辑都在那里。我有我的sagas，选择器，然后使用useDispatch（useSelector等）创建钩子。例如，当我提交Formik表单时，在 useUpdateNotifications 中调用了钩子src/index.tsx（用于分发插入到我的sagas之一的事件）。但是，当我提交表单时，控制台会显示警告，告诉我应该在函数组件的主体内调用钩子。正是我所做的。

您有什么建议吗？

Answer 1

我找到了解决方案，方法和原因。以下是说明：

我在用参数调用钩子，而不是在调度时将其推迟到回调中。当然，根据该文档，我们需要先调用de hook，而我的错误是对此的误解。我现在有了这个解决方案，效果很好：

function useUpdateNotifications() {
  const dispatch = useDispatch();
  return (items: FormatedSubscription) => {
    const formatSubscriptions = valuesIn(items);
    dispatch(Events.updateNotifications(formatSubscriptions as Subscription[]));
  };
}

我可以用它简单地调用它而不会出现打字稿错误，问我“期望1个参数却有0个”：

const updateNotifications = Core.updateNotifications();
updateNotifications(notifications);

希望它将对以后的人有所帮助。

带有钩子的redux-saga不起作用，无效的钩子调用

1 个答案: