Angular Services in React

Question

I'm coming from Angular, trying to learn React (Native). How do we implement Angular's concept of a "Service" in React?

For example, I would like to do the following:

1. Get data from external API as json
2. Do something to data, e.g. modify each item
3. Make modified data available to multiple components of the app

This is extremely easy and convenient in Angular using a Service, and injecting that Service into any Components that need access to the data.

How is this achieved in React?

Answer 1

A direct counterpart to a service in vanilla React is a component. As opposed to Angular, React components don't have to exist in DOM. Similarly to services and components/directives in Angular, the separation of concerns in React can be provided with container and presentational components. Container component can handle business logic, while presentation logic goes to presentational component.

Since React favours functional approach, reused code doesn't necessarily goes to a class and can be expressed with functional composition instead.

Dependency injection pattern is provided with component hierarchy in React. It can be implemented in several common ways to make data (like service instance) available for entire application or a part of it, e.g. via deeply passed props, context API, third-party state management (Redux, MobX).

const fetchData = () => fetch(...).then(res => res.json());
const processData = data => ...;
const fetchProcessedData = () => fetchData().then(processData);

class ContainerComponent extends React.Component {
  state = {};

  componentDidMount() {
    fetchProcessedData().then(data => {
      this.setState({ data });
    });
  }

  render() {
    return {this.state.data && <PresentationalComponent data={data}/>};
  }
}

PresentationalComponent is injected with a dependency through data prop.

The same example would be possible to implement with Angular components but this would result in unwanted DOM elements.

When Redux is used for state management, things like fetching (side effects) are handled by extensions that serve this purpose, e.g. redux-thunk, redux-saga, etc. While synchronous processing is handled by reducers.