Manage all your state the React way.
Thanks Jamie Kyle for building Unstated and opening the way for easier state management. Suddenly, many people began to think that Redux or MobX might be too complicated for their needs.
Unstated's minimalist API is great, but if like me you don't need dependency injection, or you think that should be managed orthogonally with another library, you'll love Ministate's even simpler API.
npm install @ministate/base
npm install @ministate/reactimport React from 'react';
import ReactDOM from 'react-dom';
import Base from '@ministate/base';
import subscribe from '@ministate/react';
class App extends Base {
state = {
count: 0
};
increment() {
this.setState({count: this.state.count + 1});
}
decrement() {
this.setState({count: this.state.count - 1});
}
}
const app = new App();
@subscribe(app)
class Component extends React.Component {
render() {
return (
<div>
<button onClick={() => app.decrement()}>-</button>
<span>{app.state.count}</span>
<button onClick={() => app.increment()}>+</button>
</div>
);
}
}
ReactDOM.render(<Component />, document.getElementById('root'));Simple, isn't it?
To use Ministate, just extend the base class.
Example:
import Base from '@ministate/base';
class App extends Base {
state = {
count: 0
};
}Create an instance of your Ministate subclass.
Example:
const app = new App();Plain object containing your state. You should only read it, to change it, use app.setState().
Example:
console.log(app.state.count);Change your state, the React way.
Example:
app.setState({count: 999});Subscribe your React components to your Ministate instances so that your components are automatically rerendered when state change.
Example:
import subscribe from '@ministate/react';
@subscribe(app)
class Component extends React.Component {
render() {
return <div>{app.state.count}</div>;
}
}MIT