当使用redux时,我可以在容器组件中调用api吗?

use*_*364 4 reactjs redux

我最近很困惑.
当我编写redux时,如果我必须调用api,我会放一个动作来更新reducer,该组件只是从props渲染数据

但最近我看到我的同事只是在容器组件中调用api然后更新组件状态.
他说如果你的数据不需要与其他组件共享,你可以在组件中调用api,这样你就不必在actions和reducers中编写这么多代码了.

我觉得这很方便.例如:如果我有一个功能:当用户点击按钮时,我必须发送一封电子邮件.
此功能不需要通过reducer更新存储,只需提醒"发送成功"

所以我可以在容器组件中编写这段代码:

async onClick() {
  // 1. call api
  const {error, response} = await sendMail({email: this.state.email});
  if (response){    
    // 2. alert success
    this.setState({
      modal: {
        show: true,
      }
    });
  }
}
Run Code Online (Sandbox Code Playgroud)

但我不知道这是否符合redux的原则.
如果状态不需要与其他组件共享,我可以直接在组件中调用api吗?

Dam*_*oux 7

您可以从调度的操作或React组件调用api:它是您的选择.此处没有强制性规则,这取决于您要对组件执行的操作:

何时使用React状态:

  • 最好让智能组件处理自己的状态,因为它可以简化外部项目的集成.拥有使用Redux的组件意味着项目需要添加需要的reducers才能使用该组件.
  • 如果组件处理任何其他组件不需要的信息,请使用React状态.通常情况下,与UI状态相关的信息.

使用Redux时减少:

  • 如果您需要测试组件,请选择Redux,因为在测试组件时,您可以将"测试操作"连接到组件.
  • 如果您需要通过组件共享数据包,则更喜欢Redux来共享信息.

如果你想看一下,这个问题已由Reder github存储库中的Gaeron处理.他解释说:

将React用于对全局应用程序无关紧要的短暂状态,并且不会以复杂的方式进行变异.例如,某个UI元素中的切换,表单输入状态.将Redux用于全局重要或以复杂方式变异的状态.例如,缓存用户或帖子草稿.有时你会想要从Redux状态转移到React状态(当在Redux中存储某些东西变得笨拙时)或者反过来(当更多组件需要访问某些曾经是本地的状态时).经验法则是:做任何不那么尴尬的事情.