djinn-state-react

Djinn-state react

Djinn-state helpers for react

Install

npm npm i --save djinn-state djinn-state-react

yarn yarn add djinn-state djinn-state-react

Examples

• Todo app

Using

// djinn.js
import { Djinn, DjinnService } from 'djinn-state';
import { createUseService } from 'djinn-state-react';

export const djinn = new Djinn();
export const useService = createUseService(djinn);


// CounterService.js
export class CounterService extends DjinnService {
  state = {
    count: 0,
  };
  
  decrement = () => {
    const count = this.state.count - 1;
    this.patch({ count });
  };
  
  increment = () => {
    const count = this.state.count + 1;
    this.patch({ count });
  };
}

// djinnServices.js
import { djinn } from './djinn';

djinn.register(CounterService);
djinn.start();


// HomePage.js
import React from 'react';
import { useService } from './djinn';
import { CounterService } from './CounterService';

const HomePage = ({ services, state }) => {
  const counter = useService(CounterService);
  
  return (
    <div>
    <button onClick={counter.decrement}>-</button>
    {counter.state.count}
    <button onClick={counter.increment}>+</button>
    </div>
  );
}

export default HomePage;