Javascript 在React应用程序中，我应该在哪里放置副作用？

我正在构建一个React应用程序，希望确定实现以下行为的最干净的方法

我有一个

列表

组件，它呈现N个

详细信息

组件。每个

Details

组件都有一个

Connect

按钮组件，该组件将触发某些行为。有3种不同的行为：

立即进行API调用，无需更改状态

打开一个模式并根据输入模式中的值进行API调用，这涉及更改应用程序

状态

以呈现模式，然后在确认

模式时进行API调用

打开一个弹出窗口，并根据该弹出窗口返回的值进行API调用 为了实现这一点，我可以将3个单独的回调传递给

Connect

按钮组件，并根据

Detail

组件的值进行切换，以便它知道要传递哪个回调。但是，这意味着

详细信息
组件具有一些“打开类型”行为。比如说,

if (this.props.name === `immediate-connection`) { 
    callbackToPass = this.props.callApi;
} else if (this.props.name === `trigger-modal`) {
    callbackToPass = this.props.changeStateToRenderModal;
}... // etc.

我还可以构建3个单独的组件来封装行为，并让它们从
详细信息
进行渲染，但这并不能避免打开类型行为

表达这个问题的另一种方式是，当
Connect
按钮的实现不同时，如何从按钮中获得相同的行为？我是将此行为封装在由
Connect
按钮呈现的子组件中，还是将其提升到将更改
状态的时间
 “副作用到哪里去了？”一个有趣的问题。更重要的问题：“副作用到哪里去了？”它们不会与表示代码混合，也不会与数据转换代码混合（这两种东西也不会相互混合）。请注意，如果您遵守这两条规则，很明显，副作用将出现在一个组件中，该组件的唯一任务是产生所述副作用，并可能传递结果/有条件地呈现子级。如果您使用redux或hook，通常会出现副作用。如果您使用effecthook，那么不要将其与jsx混合，并将Container添加到名称中，这样您就知道它是一个容器。钩子示例没有正确地将这一点简化为examle。