hokaccha / React Micro Container
Micro framework for React
Stars: ✭ 90
Programming Languages
javascript
184084 projects - #8 most used programming language
react-micro-container
Flux is good architecture for react applications, but it's too complex to build small react application. For small applications, it's important to separate stateless components and stateful container components.
react-micro-container
provides minimum features for container components.
Installation
$ npm install react-micro-container
Usage
Create stateless components that receive dispatch
function via props
.
import React from 'react';
class Counter extends React.Component {
render() {
return (
<div>
<div>{this.props.count}</div>
<button onClick={() => this.props.dispatch('increment', 1)}>+1</button>
<button onClick={() => this.props.dispatch('decrement', 1)}>-1</button>
<button onClick={() => this.props.dispatch('increment', 100)}>+100</button>
</div>
);
}
}
Next, create container class that has dispatch
and subscribe
. You can handle events and update state in the container.
import React from 'react';
import MicroContainer from 'react-micro-container';
import Counter from '../components/counter';
class CounterContainer extends MicroContainer {
constructor(props) {
super(props);
this.state = { count: 0 };
}
componentDidMount() {
this.subscribe({
increment: this.handleIncrement,
decrement: this.handleDecrement,
});
}
handleIncrement(count) {
this.setState({ count: this.state.count + count });
}
handleDecrement(count) {
this.setState({ count: this.state.count - count });
}
render() {
return <Counter dispatch={this.dispatch} {...this.state} />;
}
}
Finally, mount to DOM. CounterContainer
is also just a react component.
import React from 'react';
import ReactDOM from 'react-dom';
import CounterContainer from './containers/counter';
ReactDOM.render(<CounterContainer />, document.getElementById('app'));
Thanks
This library is inspired by mizchi's article. Thanks!
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].