react-hot-wire

react-hot-wire

motivation

I needed a React tool that would allow me to separate the view layer with other application layers. I wanted to be able to create services that are completely separated, that know nothing about the view. When I succeeded, there was a problem with injecting these services into individual components (at any application level). For this purpose a react-hot-wire was created. It allows to define what services a given component needs, and enables convenient injection. Additionally, the component can react to changes in services by plugging its own listener into the service cycle.

installation

main package (to integrate with React)

$ npm install --save react-hot-wire

main dependency (to resolve DI container)

$ npm install --save hot-wire

simple usage

First we should define the service(s) to be solved by the hot-wire module.

Example service:

// services/language.service.js

export default class LanguageService {
    _currentLanguage = 'en';

    currentLanguage() {
        return this._currentLanguage;
    }
}

Then by using hot-wire we create the instances of the services and inject dependencies into the appropriate places (I suggest you see the hot-wire tests). Then we pass the solved services to Provider:

// index.js

import ReactDOM from 'react-dom';
import HotWire from 'hot-wire';
import { Provider } from 'react-hot-wire';
import LanguageService from 'services/language.service';

const container = new HotWire().wire({
    services: {
        // this is example usage, we can store definitions whenever we want
        languageService: {
            class: LanguageService,
            public: true,
        },
        // other definitions of services here...
    },
});

container.then(services => {
    ReactDOM.render(
        <Provider services={services}>{/* application code here */}</Provider>,
        document.getElementById('app')
    );
});

Now you would like to inject into a component, at any level, an instance of a selected service. With help comes the wire function, which in arguments accepts the component that is to have the service injected, and the array of services to be set in props:

// components/language.component.js

import React from 'react';
import { wire } from 'react-hot-wire';

function Language({ languageService }) {
    return languageService.currentLanguage();
}

export default wire(['languageService'], Language);

or simply:

import React from 'react';
import { Wire } from 'react-hot-wire';

import Language from 'components/language.component';

export function App() {
    return (
        <Wire
            services={['languageService']}
            render={({ languageService }) => <Language lang={languageService.currentLanguage()} />}
        />
    );
}

Now we have injected the selected service into the component, and we can take full advantage of its capabilities. As the service was injected by props, we have the possibility of convenient component testing, substitution of this service, etc.

advanced usage

listening to changes

// hoc/language.hoc.js

import React, { useEffect } from 'react';
import { wire } from 'react-hot-wire';

export default Component =>
    wire(['languageService'], function LanguageHOC({ languageService, ...props }) {
        useEffect(() => {
            return languageService.addChangeListener(() => {} /* do something... */);
        });

        return <Component lang={languageService.currentLanguage()} {...props} />;
    });

// components/language.component.js

import LanguageHOC from 'hoc/language.hoc';

export function Language({ lang }) {
    return lang;
}

export default LanguageHOC(Language);

• and small modification in the example service (extends for a Service)

- export default class LanguageService {

+ import { Service } from 'react-hot-wire';
+
+ export default class LanguageService extends Service {

API interface

<Provider>

• property services: Object<string, Object> - services after a resolved container

<Wire>

• property services: string[]

• property render: (services: Object<string, Object>): Component

wire()

• wire(Component: Component, dependencies: string[]): Component

class Service

• addChangeListener(changeListener: Function): Function

• runChangeListeners(): void