Angular 从角度到反应-如何将业务逻辑与组件解耦？

对于来自Angular的人来说，主要的问题是如何正确地将业务逻辑与表示解耦。我不希望它位于组件内部，所以在Angular中，我们只是创建了服务层，在其中存储逻辑，并通过依赖注入访问这些服务

由于react是函数式编程，我想知道构建逻辑并将其与视图（组件）分离的最佳实践是什么

假设我有身份验证服务，为此我使用OIDC对Identity Server进行身份验证。我在Angular中有一个类和多个函数

export class LoginComponent{
_authService: AuthService;
constructor(){authService: AuthService}

login():void {
let result= _authService.login("user", "password);
}
}

如何在React中解耦逻辑？假设我在authService中有10个方法，使类变得相当大，或者如果我分离到较小的类，如何链接所有这些方法？我阅读了HOC模式、容器模式和redux（actions和dispatchers）以及内部导出和存储函数的经典模块（aka helpers）。我不确定帮手是否是一种好的做法

这里有标准的还是混合的

我在互联网上看到的大部分教程都是基本语法，而不是真正的应用程序结构和解耦。

首先angular是一个MVC框架（至少不仅仅是react），这就是为什么它提供了处理视图和逻辑的工具。React是一个纯粹的“视图”框架，因此它不假设业务逻辑如何工作，也不提供任何工具。为了处理您的模型，您可以使用或之类的东西，或者您可以构建自己的体系结构，这通常会遵循。例如，Redux基于函数式编程的概念，而React并不是纯粹的函数式，也不强制任何函数式风格。不过，我建议使用函数式编程概念

现在“最佳实践”显然是非常固执己见的，并且在很大程度上取决于应用程序的规模。因此，我认为你将无法找到关于“正确”方法的单一答案

就个人而言，我喜欢使用Redux进行状态管理（逻辑），这是您无法从React获得的MC部分。如果您将所有应用程序状态放在Redux中，并通过分派操作对其进行修改，那么您的组件就不必了解业务逻辑中的任何内容。这就是容器模式可能有用的地方。从这里你可以得到以下信息

• 智能组件了解redux并与之交互。因此，他们可以访问您的模型状态，并对模型分派操作
• 哑组件对模型状态一无所知。它们应该完全基于您传递给它的道具来渲染

如果严格遵循容器模式，您将体验到视图调试变得更加容易，因为每个组件都严格地基于您传递给它的道具进行渲染。因此，这将为您提供以下组件和逻辑的分离

您可以使用业务逻辑智能组件和非智能组件

class SomeSmartComponent extends React.Component {      
  constructor(props) {
    super(props)
    this.state = {logic: new logic(1)};
  }

  logicOperation = () => this.setState({logic: this.state.logic.importantOperation()});

  render() {
    return (
      <SomeDumbComponent 
        importantLogicVariable={this.state.logic.importantVariable}
        onClick={this.logicOperation}/>
    );
  }
}

现在您可以在这里获得一些示例代码

让我们创建一些非常简单的“逻辑”

接下来，让我们创建一个智能组件，负责将逻辑解析到哑组件

class SomeSmartComponent extends React.Component {      
  constructor(props) {
    super(props)
    this.state = {logic: new logic(1)};
  }

  logicOperation = () => this.setState({logic: this.state.logic.importantOperation()});

  render() {
    return (
      <SomeDumbComponent 
        importantLogicVariable={this.state.logic.importantVariable}
        onClick={this.logicOperation}/>
    );
  }
}

class SomeSmartComponent扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={logic:new logic（1）}；
}
logicOperation=（）=>this.setState（{logic:this.state.logic.importantOperation（）}）；
render（）{
返回(
);
}
}

最后，我们可以创建一个哑组件，它根据我们传递的道具呈现我们的逻辑

class SomeDumbComponent extends React.Component {
  render() {
    return (
      <div>
        <div>I know nothing about the application state</div>
        <div>However i have a prop with value: <b>{this.props.importantLogicVariable}</b></div>
        <div>And i can invoke actions by a button press</div>
        <button 
          type="button"
          onClick={this.props.onClick}>
          Do something
        </button>
       </div>
    );
  }
}

类组件扩展了React.Component{
render（）{
返回(
我对应用程序状态一无所知
但是我有一个prop的值：{this.props.importantLogicVariable}
我可以通过按下按钮来调用动作
做点什么
);
}
}

请注意，哑组件不了解我们的业务逻辑。它只是显示我们传递给它的一些信息。即使我们调用的逻辑函数对哑组件是透明的，它也只知道当单击按钮时，它应该调用“某物”。那是什么，纯粹是基于我们作为道具传递的功能

---

您还可以

Angular是一个完整的MVC框架。因此，它也负责处理您的业务逻辑。React是一个纯粹的视图框架，而不是这样。因此，它负责渲染组件，对如何维护模型没有任何要求或假设。通常人们对模型和控制器部分使用Redux。通常，您会创建“哑”组件，它仅基于道具渲染视图。然后，您可以使用Redux或其他任何方法向组件提供数据。您的方法也是如此。只要把它们作为道具传下去就行了。然后，您的组件只负责调用函数，但是调用函数时会发生什么，取决于您传递给它的道具。例如，这可以是redux操作的分派；-）