Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Having services in React application

I'm coming from the angular world where I could extract logic to a service/factory and consume them in my controllers.

I'm trying to understand how can I achieve the same in a React application.

Let's say that I have a component that validates user's password input (it's strength). It's logic is pretty complex hence I don't want to write it in the component it self.

Where should I write this logic? In a store if I'm using flux? Or is there a better option?

like image 639
Dennis Nerush Avatar asked Mar 07 '16 22:03

Dennis Nerush


People also ask

Can we use services in React?

Validation could be all done in the container's properties, but it you're using a 3rd party validator, or any simple validation service, you can use the service as a property of the container component and use it in the container's methods. I've done this for restful components and it works very well.

What is a service in React app?

In simple words, services are just ordinary classes which will contain functions of your own choice, so call them how you like. 💡 Let's dig in! 🚀 We will start with fresh React application.

Do React apps need a server?

You don't necessarily need a static server in order to run a Create React App project in production. It also works well when integrated into an existing server side app.


1 Answers

The issue becomes extremely simple when you realize that an Angular service is just an object which delivers a set of context-independent methods. It's just the Angular DI mechanism which makes it look more complicated. The DI is useful as it takes care of creating and maintaining instances for you but you don't really need it.

Consider a popular AJAX library named axios (which you've probably heard of):

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

Doesn't it behave as a service? It provides a set of methods responsible for some specific logic and is independent from the main code.

Your example case was about creating an isolated set of methods for validating your inputs (e.g. checking the password strength). Some suggested to put these methods inside the components which for me is clearly an anti-pattern. What if the validation involves making and processing XHR backend calls or doing complex calculations? Would you mix this logic with mouse click handlers and other UI specific stuff? Nonsense. The same with the container/HOC approach. Wrapping your component just for adding a method which will check whether the value has a digit in it? Come on.

I would just create a new file named say 'ValidationService.js' and organize it as follows:

const ValidationService = {     firstValidationMethod: function(value) {         //inspect the value     },      secondValidationMethod: function(value) {         //inspect the value     } };  export default ValidationService; 

Then in your component:

import ValidationService from "./services/ValidationService.js";  ...  //inside the component yourInputChangeHandler(event) {      if(!ValidationService.firstValidationMethod(event.target.value) {         //show a validation warning         return false;     }     //proceed } 

Use this service from anywhere you want. If the validation rules change you need to focus on the ValidationService.js file only.

You may need a more complicated service which depends on other services. In this case your service file may return a class constructor instead of a static object so you can create an instance of the object by yourself in the component. You may also consider implementing a simple singleton for making sure that there is always only one instance of the service object in use across the entire application.

like image 137
Wojtek Majerski Avatar answered Oct 04 '22 21:10

Wojtek Majerski