dex1t/react-micro-container

Micro framework for React

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