React Context Services

Create services and subscribe to them with the new React context API and hooks

Less than 1kb minified + gziped

$ yarn build

$ yarn sample

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

• 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.

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 });
}

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>;
}