react-services-dev
v0.1.6
Published
Dependency injection and services layer for react.js
Downloads
3
Readme
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>
}
})