在应用程序中有服务

Question

我来自一个角度分明的世界，在那里我可以将逻辑提取到服务/工厂，并在控制器中使用它们。

我试图了解如何在React应用程序中实现相同的功能。

假设我有一个验证用户密码输入的组件（它的强度）。它的逻辑相当复杂，因此我不想将其写在组件中。

我应该在哪里写这个逻辑？在商店里，如果我使用flux？还是有更好的选择？

Answer 1

我需要一些格式化逻辑在多个组件之间共享，作为Angular开发人员，我也自然倾向于服务。

我把它放在一个单独的文件中，分享了这个逻辑

function format(input) {
    //convert input to output
    return output;
}

module.exports = {
    format: format
};

然后将其作为模块导入

import formatter from '../services/formatter.service';

//then in component

    render() {

        return formatter.format(this.props.data);
    }

Answer 2

第一个答案并不反映当前容器与演示者的范例。

如果你需要做一些事情，比如验证密码，你可能会有一个函数来完成它。您将把该函数作为道具传递给可重用视图。

因此，正确的方法是编写一个ValidatorContainer，它将该函数作为属性，并将表单包装在其中，将正确的道具传递给子级。当涉及到视图时，验证器容器包装视图，视图使用容器逻辑。

验证可以在容器的属性中完成，但是如果您使用第三方验证器或任何简单的验证服务，您可以将该服务用作容器组件的属性，并在容器的方法中使用它。我这样做是为了Rest的组件，它工作得很好。

如果需要更多的配置，可以使用提供者/使用者模型。提供程序是一个高级组件，它封装在顶部应用程序对象（您装载的对象）的附近和下面，并向上下文API提供自身的一部分或在顶层配置的属性。然后，我将容器元素设置为使用上下文。

父/子上下文关系不必彼此相邻，只需子上下文以某种方式向下。Redux以这种方式存储和响应路由器功能。我已经使用它为我的rest容器提供了根restful上下文（如果我没有提供自己的）。

（注意：上下文API在文档中标记为实验性的，但考虑到它的用途，我认为它不再是实验性的）。

//An example of a Provider component, takes a preconfigured restful.js
//object and makes it available anywhere in the application
export default class RestfulProvider extends React.Component {
	constructor(props){
		super(props);

		if(!("restful" in props)){
			throw Error("Restful service must be provided");
		}
	}

	getChildContext(){
		return {
			api: this.props.restful
		};
	}

	render() {
		return this.props.children;
	}
}

RestfulProvider.childContextTypes = {
	api: React.PropTypes.object
};

Answer 3

当您意识到Angular服务只是一个提供一组与上下文无关的方法的对象时，这个问题就变得非常简单了。只是角直接投资机制让它看起来更复杂。DI非常有用，因为它负责为您创建和维护实例，但您并不真正需要它。

考虑一个名为axios（你可能听说过）的流行AJAX库：

import axios from "axios";
axios.post(...);

它不是一种服务吗？它提供了一组负责某些特定逻辑的方法，并且独立于主代码。

您的示例案例是关于创建一组独立的方法来验证您的输入（例如，检查密码强度）。有些人建议将这些方法放在组件中，这对我来说显然是一种反模式。如果验证涉及进行和处理XHR后端调用或进行复杂计算，该怎么办？你会将这种逻辑与鼠标点击处理程序和其他特定于用户界面的东西混合在一起吗？胡说容器/HOC方法也是如此。包装组件只是为了添加一个方法，该方法将检查值中是否有数字？来吧

我会创建一个名为ValidationService.js的新文件，并按以下方式组织它：

const ValidationService = {
    firstValidationMethod: function(value) {
        //inspect the value
    },

    secondValidationMethod: function(value) {
        //inspect the value
    }
};

export default ValidationService;

然后在您的组件中：

import ValidationService from "./services/ValidationService.js";

...

//inside the component
yourInputChangeHandler(event) {

    if(!ValidationService.firstValidationMethod(event.target.value) {
        //show a validation warning
        return false;
    }
    //proceed
}

从任何您想要的地方使用此服务。如果验证规则更改，则只需要关注ValidationService.js文件。

您可能需要一个更复杂的服务，它依赖于其他服务。在这种情况下，您的服务文件可能会返回一个类构造函数而不是静态对象，因此您可以自己在组件中创建对象的实例。您还可以考虑实现简单的单实例，以确保在整个应用程序中始终只使用服务对象的一个实例。