O serviço não se limita ao Angular, mesmo no Angular2 + ,
O serviço é apenas uma coleção de funções auxiliares ...
E há muitas maneiras de criá-los e reutilizá-los no aplicativo ...
1) Elas podem ser todas as funções separadas que são exportadas de um arquivo js, semelhante ao abaixo:
export const firstFunction = () => {
return "firstFunction";
}
export const secondFunction = () => {
return "secondFunction";
}
//etc
2) Também podemos usar o método factory, como com a coleção de funções ... no ES6 , pode ser uma classe e não um construtor de funções:
class myService {
constructor() {
this._data = null;
}
setMyService(data) {
this._data = data;
}
getMyService() {
return this._data;
}
}
Nesse caso, você precisa criar uma instância com nova chave ...
const myServiceInstance = new myService();
Também neste caso, cada instância tem sua própria vida, portanto, tenha cuidado se quiser compartilhá-la, nesse caso, você deve exportar apenas a instância que deseja ...
3) Se sua função e utilitários não forem compartilhados, você pode até colocá-los no componente React, nesse caso, da mesma forma que no componente reage ...
class Greeting extends React.Component {
getName() {
return "Alireza Dezfoolian";
}
render() {
return <h1>Hello, {this.getName()}</h1>;
}
}
4) Outra maneira de lidar com as coisas, pode ser usar o Redux , é uma loja temporária para você, portanto, se você o tiver no aplicativo React , ele poderá ajudá-lo com muitas funções de setter getter que você usa ... É como uma grande loja que mantêm o controle de seus estados e podem compartilhá-lo entre seus componentes, assim podem se livrar de muitos problemas causados por animais que usamos nos serviços ...
É sempre bom criar um código DRY e não repetir o que precisa ser usado para tornar o código reutilizável e legível, mas não tente seguir as formas angulares no aplicativo React , como mencionado no item 4, o uso do Redux pode reduzir sua necessidade de serviços e você limita a usá-los para algumas funções auxiliares reutilizáveis, como o item 1 ...