rc-service v3.0.0
rc-service
React Context Services
Create services and subscribe to them with the new React context API and hooks
Less than 1kb minified + gziped
Build
$ yarn build
Run Sample
$ yarn sample
How it works?
Define your services extending the Service class with the internal state
and the methods that will change the state using setState
.
Tip: Use arrow functions if you want to pass your methods as callbacks to events
The Provider renders a Context#Provider with the current map of services and the services that need to be updates.
The Subscribe renders a Context#Consumer that will specify the bitMask of the subscribed components
When you call setState to update state, the Context will verify the bitMask of the changed Service's and the bitMask of the connected Service's on Subscribe and update only the Subscribe components that are connected to that services
Other state management libs
unstated: https://github.com/jamiebuilds/unstated
The Api is inspired by unstated lib but they work different. Even tough unstated uses the new Context, it still uses a subscriber pattern and connects Subscribers directly to Containers (Service) while rc-service connects Services to Providers that will use Context bitMask diff to update Subscribers
redux: https://github.com/reactjs/redux
Probably the most used state management of react, created by Dan Abramov (@gaearon), it follows a different approach in a more pure programming way. In redux all Connected components listens to changes on the store and all of them will update if any state change, it then uses mapStateToProps to know if it needs to update it's children's or not.
Services
class MyService extends Service {
// define name of the service, used for log's and key
static serviceName = 'MyService';
// define initial state
state = {
value: 10
};
//Use setState to update the Service state
increment = () => this.setState({ value: this.state.value + 1 });
}
Provider and Subscribe
Subscribe receives a to
array with Service classes and uses a render prop with the value of the subscribed Services
function App() {
const myService = useService(MyService);
return <button onClick={myService.increment}>{'myService ' + myService.state.value}</button>;
}
2 years ago
2 years ago
3 years ago
3 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago