25

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

UltraSonja
  • 881
  • 1
  • 20
  • 33
Kuan
  • 11,149
  • 23
  • 93
  • 201

5 Answers5

20

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'
Michael Dunn
  • 216
  • 2
  • 3
  • 1
    How do you watch for changes in such service? – untitled May 10 '18 at 17:53
  • @untitled I guess it uses Redux or flux pattern. – Kuan Aug 23 '18 at 16:39
  • At some point you're going to have to deal with singleton objects (if only from third party libs.) This proposed pattern doesn't address how and when you would instantiate singletons, how they are managed, and how they are consumed. This is what react-services does for you. – ianstarz Oct 31 '18 at 23:24
  • How do you get the value from foo function from the component? – Shalom Dahan Jul 26 '19 at 13:08
10

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

vijay
  • 10,276
  • 11
  • 64
  • 79
2

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?.

Community
  • 1
  • 1
J. Mark Stevens
  • 4,911
  • 2
  • 13
  • 18
  • Thanks for info. But I wonder if there is a simple way to use FLUX? – Kuan Sep 28 '15 at 20:34
  • Once the basics are setup for reflux it is much simpler than angularjs. It only looks complex because your not used to it. Take a look at https://github.com/calitek/ReactPatterns. Just play with it a little and it will make sense. – J. Mark Stevens Sep 28 '15 at 23:33
1

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

Lee Goddard
  • 10,680
  • 4
  • 46
  • 63
0

https://medium.com/@alshdavid/react-state-and-services-edb95be48851

Here's an article showing how to do it with nothing but React Context and rxjs

David Alsh
  • 6,747
  • 6
  • 34
  • 60