Skip to content

fluxury/react-pure-flux

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-pure-flux

CircleCI

Connect a pure-flux store to React.js.

It enables the PureRenderMixin to improve performance.

Install

npm install --save react-pure-flux pure-flux

Example

var Component = require('react').Component;
var {createStore, dispatch} = require('pure-flux');
var {connectStore} = require('react-pure-flux');

var countStore = createStore("CounterStore", (state={ count: 0 }, action) => {
  switch (action.type) {
    case 'increment':
    return { count: state.count+1 };
    default:
    return state;
  }
});

class MyComponent extends Component {

  handleUpClick() {
    dispatch('increment')
  }

  handleDownClick() {
    dispatch('decrement')
  }

  render() {
    return (
      <div>
        <p>{this.props.count}</p>
        <button onClick={this.handleUpClick}>+1</button>
        <button onClick={this.handleDownClick}>-1</button>
      </div>
    );
  }

});

EnhancedComponent = connectStore(countStore, MyComponent, (state) => {
  count: state
})