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 { createDjinnConnector } from 'djinn-state-react';

export const djinn = new Djinn();
export const connect = createDjinnConnector(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 { connect } from './djinn';
import { CounterService } from './CounterService';

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

export default connect({
  CounterService,
})(HomePage);