How to implement service(concept in AngularJS) -like component in React

Question

All:

I am pretty new to React from AngularJS. In AngularJS, there is service dependency inject which can provide a service instance to do data fetching, processing, etc., other than UI operation. I wonder how to do this(or implement that injection) in React component?

Thanks

Answer 1

I prefer to create a service in another file that exposes the 'public' functions through module.exports.

e.g.

module.exports = {
  foo: function(){ return bar; }
}

which is then referenced by Components using

import myService from './routetoservice/myService'

Answer 2

An Extension to Michael Dunn's Answer

This is the actual answer ,

• Service pattern is not limited to any programming language or library.

• We can implement this concept in any language , Even we can implement this in react

• A tiny service can be created on server OR in ui browser in Javascript that serves some logical purpose

• It gives us benefits of code availability, code management , code isolation of particular logic

• Its a very native way for code availability, code management , code isolation of particular logic

• If we compare redux/flux vs services ,redux/flux also serve these purpose's

• Currently i am using redux and its actions , and also created my tiny services on ui when required.

• No need to use OTHER NPM MODULES FOR CREATING SERVICES , Just Michael Dunn's solution is enough

Answer 3

In reactjs we use the flux pattern to provide data handling. Here is an example of that with reflux. React with Flux: is this the dogmatic pattern or are there equal/better options?.

Answer 4

React seems philosophically opposed to services in the Angular sense, apparently preferring tight coupling of UI and logic.

But I have found a react-services module, which seems to offer what you are after:

• separate your component and application state by introducing a service layer that takes care of propagating changes through your application

• manage component dependencies in an explicit, testable way

• there's no events and no lifecycle management - everything is done automatically for you

• it's tiny and easy to understand - the core is less than 100 lines of code