New way for state management without connect component
npm install react-beep
import { initial } from 'react-beep';
initial([
{
name: 'time',
defaultValue: 2018
}
]);
import React, { PureComponent } from 'react';
import { state, Beep } from 'react-beep';
class DisplayTime extends Beep(['time'], PureComponent) {
render() {
return <div>{state.time}</div>;
}
}
import { state } from 'react-beep';
state.time = 2019;
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)
}
]);
import { on } from 'react-beep';
on('time', value => {
console.log('change time:', value);
});
import { init } from 'react-beep';
init({
name: 'time',
defaultValue: 2018
});
if time
is not inited, emit just send message to the listener
import { emit } from 'react-beep';
emit('time', 2020);
You should pass React.PureComponent
or React.Component
as second argument.
- class DisplayTime extends Beep(['time']) {
+ class DisplayTime extends Beep(['time'], PureComponent)