react-reservice

A minimal react state management via proxy

Install

npm install react-reservice

Usage

import React from 'react';
import Service, { useService, serviceSelector } from 'react-reservice';

// Create service class
class YourService extends Service {
  constructor() {
    super();
    this.context = {
      // Set default context value
      username: 'Mark',
      balance: 1000
    };
  }

  updateUsername = (username: string) => {
    // Update context value directly
    this.context.username = username;
  }
}

// Create service instance
const yourService = new YourService();

// Create custom hooks by passing service instance and value selector
const useYourService = (subscriptionKeys: string[]) => useService(yourService, serviceSelector(subscriptionKeys));

// Bind the hooks with your component
const Username: FC = () => {
  // The Component will render only when `username` changed
  const { username } = useYourService(['username']);

  return <div>{username}</div>;
}

// Call service function directly in anywhere!!
yourService.updateUsername('John')