Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-services-injector

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-services-injector

A library to create and use sigleton-services in your React application.

  • 0.2.0-beta.3
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
7
Maintainers
1
Weekly downloads
 
Created
Source

React Services Injector

Got tired with Redux? Really hate that ACTION_THAT_DOES_SOME_ACTION: "ACTION_THAT_DOES_SOME_ACTION"? Or maybe you are used to be an Angular-developer? So then you definitely should try some services in React!

Installation

npm i --save react-services-injector

Using

At first, create your first service (services/storage.js):

import {Service} from 'react-services-injector';

export default class Storage extends Service {
    constructor() {
        this.filter = '';
        this.products = [];
    }

    addProduct({name, price}) {
        this.products.push({name, price});
    }

    setFilter(filter = '') {
        this.filter = filter;
    }

    getFiltered() {
        return this.products.filter(product => {
            return (product.name || '').toLowerCase()
                       .indexOf(this.filter.toLowerCase()) === 0;
        }) || [];
    }
}

Important! Methods that are not changing anything should be named as getSomething, starting with get keyword (don't get confused with getters). Also such methods may start from _ character.

Create an index.js in your services directory to export them all:

import Storage from './storage';

export default [{
    name: 'storage',
    service: Storage
}];

Then register your service in the main file (app.js):

import React from 'react';
import { render } from 'react-dom';
import Root from './containers/Root';

//here we go
import {injector} from 'react-services-injector';
import services from './services';

injector.register(services);

render(<Root />,
    document.getElementById('root')
);

Use your service! Wow, such simple, isn't it?

import {injector} from 'react-services-injector';

class ProductTable extends React.Component {
    constructor(props) {
        super(props);

        this.addRandomProduct = this.addRandomProduct.bind(this);
    }

    addRandomProduct() {
        this.services.storage.addProduct({
            name: 'Test product',
            price: Math.floor(Math.random() * 250) + 50
        });
    }

    render() {
        let {storage} = this.services;

        return (
            <div>
                {storage.getFiltered().map((product, index) =>
                    <Product key={index} data={product} />
                )}

                <button onClick={() => this.addRandomProduct()}>Add</button>
            </div>
        )
    }
}

export default injector.connect(ProductTable);

Important! You definitely shouldn't use services in constructor. You can't to, actually. Use it, for example, in the componentWillMount lifecycle method if you need something to be done once component is created.

You can also use services in another services in the same way in any method except constructor.

Initialization

If you need to do some initialization of your service (probably asynchronous), you can use serviceDidConnected lifecycle method of service. That is the only lifecycle method so far.

Behavior

Singletons

Services are singletons, so you can use your service in multiple components with the same data.

Asynchronous actions

If you want to do some asynchronous stuff if your service, please use this.$update() after it is done (remember $scope.$apply(), huh?) For example:

addProduct({name, price}) {
    setTimeout(() => {
        this.products.push({category, name, price, stocked});

        this.$update(); //here is it
    }, 200);
}
Only ES6 classes

It is already 2017, right? Please, use ES6 classes instead of React.createComponent (especially as even React says that method is deprecated). Also, the library won't connect your functional components -- create a class if you want to use services there.

Troubleshooting

Please, feel free to create an issue any time if you found a bug or unexpected behavior. Feature requests are pretty much acceptable too.

Keywords

FAQs

Package last updated on 20 Apr 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc