react-beep

New way for state management without connect component

install

npm install react-beep

use

Initial state

import { initial } from 'react-beep';

initial([
  {
    name: 'time',
    defaultValue: 2018
  }
]);

Connect to components

import React, { PureComponent } from 'react';
import { state, Beep } from 'react-beep';

class DisplayTime extends Beep(['time'], PureComponent) {
  render() {
    return <div>{state.time}</div>;
  }
}

Change state

import { state } from 'react-beep';

state.time = 2019;

Advance

import { initial } from 'react-beep';

initial([
  {
    name: 'time',
    defaultValue: 2018,
    shouldUpdate: (prevValue, nextValue) => nextValue > prevValue,
    willUpdate: (prevValue, nextValue) => console.log(prevValue, nextValue),
    didUpdate: value => console.log(value)
  }
]);

API

Listen to the changes

import { on } from 'react-beep';

on('time', value => {
  console.log('change time:', value);
});

Init single state

import { init } from 'react-beep';

init({
  name: 'time',
  defaultValue: 2018
});

Other way for change state

if time is not inited, emit just send message to the listener

import { emit } from 'react-beep';

emit('time', 2020);

Migration from v1 to v2

You should pass React.PureComponent or React.Component as second argument.

- class DisplayTime extends Beep(['time']) {
+ class DisplayTime extends Beep(['time'], PureComponent)