Skip to content
Dependency injection and service layer for react.js
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
.npmignore
LICENSE
README.md
gulpfile.js
package.json

README.md

React + Services

What is React + Services?

React + Services is a thin dependency injection layer on React.js.

Why services?

  • 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

Installation

npm install react-services

Initialization

In order not to package multiple versions of React with your application, react-services expects getReact function to be defined.

function getReact() { return React; }

Defining services

var defineService = require("react-services").defineService

Service = defineService("NameService", function() {
  return {
    name: function() {
      return "React + Services"
    }      
  };
})

Using services

Define the services consumed by a component in the subscribe field:

var services = require("react-services")

Application = services.defineComponent({
  subscribe: {
    name: "NameService#name"
  },
  render: function() {
    return `<h1>Hello {this.state.name}</h1>`
  }
})

Service = services.defineService("NameService", function() {
  return {
    name: function() {
      return "React + Services"
    }      
  };
})

Service dependencies

Services can depend on other services to produce the correct results. Any changes are automatically propagated to dependent services.

var rservices = require("react-services")

var name = "React + Services";

NameService = rservices.defineService("NameService", function() {
  return {
    name: function() {
      return name
    },
    setName: function(newName) {
      name = newName;
      NameService.update();
    }
  };
})

GreeterService = reservices.defineService("GreeterService", function(services) {
  return {
    subscribe: {
      name: "NameService#name"
    },
    greeting: function() {
      return "Hello " + services.name + "!"
    }
  }
})

Application = rservices.defineComponent({
  subscribe: {
    greeting: "GreeterService#greeting",
    setName: "NameService#setName"
  },
  setName: function(name) {
    this.state.setName(this.refs.name.getDOMNode().value)
  },
  render: function() {
    return <form>
      <h1>{this.state.greeting}</h1>
      <input ref="name" value="React + Services" onChange={this.setName} />
    </form>
  }
      
})
You can’t perform that action at this time.