Having services in React application

Question

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

User · Answer

I also came from Angular js area and the services and factories in React js are more simple   You can use plain functions or classes  callback style and event Mobx like me      x000D   x000D     Here we have Service class  gt  dont forget that in JS class is Function x000D  class HttpService   x000D    constructor     x000D      this data    Hello data from HttpService   x000D      this getData   this getData bind this   x000D      x000D   x000D    getData     x000D      return this data  x000D      x000D    x000D   x000D   x000D     Making Instance of class  gt  it s object now x000D  const http   new HttpService    x000D   x000D   x000D     Here is React Class extended By React x000D  class ReactApp extends React Component   x000D    state     x000D      data     x000D       x000D   x000D    componentDidMount     x000D      const data   http getData    x000D   x000D      this setState   x000D        data  data x000D          x000D      x000D   x000D    render     x000D      return  lt div gt  this state data  lt  div gt   x000D      x000D    x000D   x000D  ReactDOM render  lt ReactApp   gt   document getElementById  root     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  gt  x000D     lt title gt JS Bin lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D     x000D     lt div id  root  gt  lt  div gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Here is simple example

User · Answer

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

User · Answer

Keep in mind that the purpose of React is to better couple things that logically should be coupled   If you re designing a complicated  validate password  method  where should it be coupled   Well you re going to need to use it every time the user needs to input a new password   This could be on the registration screen  a  forgot password  screen  an administrator  reset password for another user  screen  etc   But in any of those cases  it s always going to be tied to some text input field   So that s where it should be coupled   Make a very small React component that consists solely of an input field and the associated validation logic   Input that component within all of the forms that might want to have a password input   It s essentially the same outcome as having a service factory for the logic  but you re coupling it directly to the input   So you now never need to tell that function where to look for it s validation input  as it is permanently tied together

User · Answer

I am from Angular as well and trying out React  as of now  one recommended    way seems to be using High-Order Components      A higher-order component  HOC  is an advanced technique in React for   reusing component logic  HOCs are not part of the React API  per se    They are a pattern that emerges from React   s compositional nature    Let s say you have input and textarea and like to apply the same validation logic    const Input    props    gt       lt input type  text      style  props style      onChange  props onChange    gt    const TextArea    props    gt       lt textarea rows  3      style  props style      onChange  props onChange   gt     lt  textarea gt      Then write a HOC that does validate and style wrapped component   function withValidator WrappedComponent      return class extends React Component       constructor props          super props         this validateAndStyle   this validateAndStyle bind this        this state             style                        validateAndStyle e          const value   e target value       const valid   value  amp  amp  value length  gt  3    shared logic here       const style   valid          border   2px solid red          console log value  valid        this setState           style  style                     render           return  lt WrappedComponent         onChange  this validateAndStyle          style  this state style              this props    gt                Now those HOCs share the same validating behavior   const InputWithValidator   withValidator Input  const TextAreaWithValidator   withValidator TextArea   render      lt div gt       lt InputWithValidator   gt       lt TextAreaWithValidator   gt     lt  div gt     document getElementById  root       I created a simple demo   Edit  Another demo is using props to pass an array of functions so that you can share logic composed by multiple validating functions across HOCs like    lt InputWithValidator validators   validator1 validator2     gt   lt TextAreaWithValidator validators   validator1 validator2     gt    Edit2  React 16 8  provides a new feature  Hook  another nice way to share logic   const Input    props    gt      const inputValidation   useInputValidation      return        lt input type  text          inputValidation    gt         function useInputValidation       const  value  setValue    useState       const  style  setStyle    useState        function handleChange e        const value   e target value     setValue value      const valid   value  amp  amp  value length  gt  3    shared logic here     const style   valid          border   2px solid red        console log value  valid      setStyle style         return       value      style      onChange  handleChange         https   stackblitz com edit react-shared-validation-logic-using-hook file index js

User · Answer

Service is not limited to Angular  even in Angular2     Service is just collection of helper functions     And there are many ways to create them and reuse them across the application     1  They can be all separated function which are exported from a js file  similar as below   export const firstFunction        gt       return  firstFunction      export const secondFunction        gt       return  secondFunction       etc   2  We can also use factory method like  with collection of functions    with ES6 it can be a class rather than a function constructor   class myService      constructor         this  data   null         setMyService data        this  data   data         getMyService         return this  data           In this case you need make an instance with new key     const myServiceInstance   new myService      Also in this case  each instance has it s own life  so be careful if you want to share it across  in that case you should export only the instance you want     3  If your function and utils not gonna be shared  you can even put them in React component  in this case  just as function in your react component       class Greeting extends React Component     getName         return  Alireza Dezfoolian          render         return  lt h1 gt Hello   this getName    lt  h1 gt           4  Another way you may handle things  could be using Redux  it s a temporary store for you  so if you have it in your React application  it can help you with many getter setter functions you use    It s like a big store that keep tracks of your states and can share it across your components  so can get rid of many pain for getter setter stuffs we use in the services     It s always good to do a DRY code and not repeating what needs to be used to make the code reusable and readable  but don t try to follow Angular ways in React app  as mentioned in item 4  using Redux can reduces your need of services and you limit using them for some reuseable helper functions like item 1

User · Answer

The first answer doesn t reflect the current Container vs Presenter paradigm   If you need to do something  like validate a password  you d likely have a function that does it   You d be passing that function to your reusable view as a prop     Containers  So  the correct way to do it is to write a ValidatorContainer  which will have that function as a property  and wrap the form in it  passing the right props in to the child   When it comes to your view  your validator container wraps your view and the view consumes the containers logic     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     Providers  If there s a bit more configuration necessary  you can use a Provider Consumer model   A provider is a high level component that wraps somewhere close to and underneath the top application object  the one you mount  and supplies a part of itself  or a property configured in the top layer  to the context API   I then set my container elements to consume the context     The parent child context relations don t have to be near each other  just the child has to be descended in some way   Redux stores and the React Router function in this way   I ve used it to provide a root restful context for my rest containers  if I don t provide my own       note  the context API is marked experimental in the docs  but I don t think it is any more  considering what s using it     x000D   x000D    An example of a Provider component  takes a preconfigured restful js x000D    object and makes it available anywhere in the application x000D  export default class RestfulProvider extends React Component   x000D   constructor props   x000D    super props   x000D   x000D    if    restful  in props    x000D     throw Error  Restful service must be provided    x000D      x000D     x000D   x000D   getChildContext    x000D    return   x000D     api  this props restful x000D       x000D     x000D   x000D   render     x000D    return this props children  x000D     x000D    x000D   x000D  RestfulProvider childContextTypes     x000D   api  React PropTypes object x000D     x000D   x000D   x000D    Middleware  A further way I haven t tried  but seen used  is to use middleware in conjunction with Redux   You define your service object outside the application  or at least  higher than the redux store   During store creation  you inject the service into the middleware and the middleware handles any actions that affect the service     In this way  I could inject my restful js object into the middleware and replace my container methods with independent actions   I d still need a container component to provide the actions to the form view layer  but connect   and mapDispatchToProps have me covered there       The new v4 react-router-redux uses this method to impact the state of the history  for example      x000D   x000D    Example middleware from react-router-redux x000D    History is our service here and actions change it  x000D   x000D  import   CALL HISTORY METHOD   from    actions  x000D   x000D      x000D     This middleware captures CALL HISTORY METHOD actions to redirect to the x000D     provided history object  This will prevent these actions from reaching your x000D     reducer or any middleware that comes after this one  x000D      x000D  export default function routerMiddleware history    x000D    return      gt  next   gt  action   gt    x000D      if  action type     CALL HISTORY METHOD    x000D        return next action  x000D        x000D   x000D      const   payload    method  args       action x000D      history method     args  x000D      x000D    x000D   x000D   x000D

User · Answer

Well the most used pattern for reusable logic I have come across is either writing a hook or creating a utils file  It depends on what you want to accomplish   hooks useForm js   Like if you want to validate form data then I would create a custom hook named useForm js and provide it form data and in return it would return me an object containing two things   Object        value      error      You can definitely return more things from it as you progress   utils URL js   Another example would be like you want to extract some information from a URL then I would create a utils file for it containing a function and import it where needed    export function getURLParam p

User · Answer

I am in the same boot like you  In the case you mention  I would implement the input validation UI component as a React component   I agree the implementation of the validation logic itself should  must  not be coupled  Therefore I would put it into a separate JS module   That is  for logic that should not be coupled use a JS module class in separate file  and use require import to de-couple the component from the  service    This allows for dependency injection and unit testing of the two independently

User · Answer

or you can inject the class inheritance  http  into React Component   via props object    update    ReactDOM render  lt ReactApp data  app    gt   document getElementById  root      Simply edit React Component ReactApp like this   class ReactApp extends React Component    state          data             render         return            lt div gt           this props data getData                   lt  div gt

User · Answer

Same situation  Having done multiple Angular projects and moving to React  not having a simple way to provide services through DI seems like a missing piece  the particulars of the service aside     Using context and ES7 decorators we can come close   https   jaysoo ca 2015 06 09 react-contexts-and-dependency-injection   Seems these guys have taken it a step further   in a different direction   http   blog wolksoftware com dependency-injection-in-react-powered-inversifyjs  Still feels like working against the grain  Will revisit this answer in 6 months time after undertaking a major React project   EDIT  Back 6 months later with some more React experience  Consider the nature of the logic    Is it tied  only  to UI  Move it into a component  accepted answer   Is it tied  only  to state management  Move it into a thunk  Tied to both  Move to separate file  consume in component through a selector and in thunks    Some also reach for HOCs for reuse but for me the above covers almost all use cases  Also  consider scaling state management using ducks to keep concerns separate and state UI-centric

User · Answer

I needed some formatting logic to be shared across multiple components and as an Angular developer also naturally leaned towards a service   I shared the logic by putting it in a separate file  function format input          convert input to output     return output     module exports         format  format      and then imported it as a module  import formatter from     services formatter service      then in component      render              return formatter format this props data

[reactjs] Having services in React application

Examples related to reactjs

Examples related to reactjs-flux