首页 > 解决方案 > 从 reducer 内部触发对 3rd 方端点的通知:是还是不是?

问题描述

我正在将 React-Redux 与 redux thunk 一起用于与远程 SDK 交互并与该 SDK 同步状态的 Web 应用程序。

除了这个远程 SDK,我还有一个第三方端点,我想向其发送生命周期更新。当加载特定页面或到达我的反应应用程序中的检查点时,我想通知端点这些事件发生了。我不关心这个端点的响应,也不会根据这个响应执行任何商店更新。当第三方端点收到此事件的通知时,它会执行一些自己的逻辑。您可以将其视为“记录”功能。

具体来说,我有兴趣在 Redux 存储更新到某个状态时触发这个 POST 请求。

我有这种方法可以将请求发布到端点:

export const lifecycleEndpointNotify = (event: string) => {
    console.log(event)
      const call = lifecycleEndpoint(event)
      console.log(call)
      return fetch(call, {
          method :'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            code: 200,
            message: 'Lifecycle event occured.',
          })
      })
      .then(
        response => console.log(response),
        error => console.log('An error occured.', error)
      )
  }

放置此函数调用的合适位置是什么?由于我想在调用特定的反应动作并更新商店后触发此事件,因此减速器对我来说是最有意义的放置它的地方。但是,由于它在技术上会触发副作用,因此我不确定将其放入减速器是否违反了 redux 规范。其他选项是让我在触发 dispatch() 调用以更新商店之前在我的 thunk 操作函数中调用此事件。但是,这不会将事件直接链接到操作本身。每当调度特定操作或存储发生特定更改时,我如何调用此事件,例如当某些变量从 true 切换到 false 时?

标签: reactjsreduxreact-reduxredux-thunk

解决方案


你永远不会在 reducer 中调用异步函数。你希望这被称为内部行动。Reducer 仅用于更新存储。

在 react 组件中,make 处理程序正在检查存储(例如在componentDidUpdate方法中),当您获得某个存储时,只需点击该dispatch函数,该函数将接收带有您希望通过 POST 请求传递的值的动作参数。然后您需要创建将进行异步调用的操作。您可以使用redux-thunk. 如果您不熟悉这种方法,请告诉我。我将尝试在https://codesandbox.io/中为您制作示例。


推荐阅读