import React from 'react'
import Reflux from 'reflux'
import ReactMixin from 'react-mixin'
import store from '../stores/store'
import actions from '../actions/actions'export default class Todo extends React.Component{//组件渲染完成后，通过action获取所有的数组，刷新绑定到this.state上
  componentDidMount() {actions.getAll();}add(){var item =this.refs.item.value;this.refs.item.value='';actions.add(item);}remove(i){actions.remove(i);}render() {//items用于乘放li的集合
    let items;if(this.state.list){items=this.state.list.map( (item,i)=> {//设置key是因为react的diff算法，是通过key来计算最小变化的return <li key={i}>{item.name}<button onClick={this.remove.bind(this,i)}>remove</button></li>
            })}return (<div><input type="text" ref="item"/><button onClick={this.add.bind(this)}>add</button><ul>{items}</ul></div>
    )}
}// ES6 mixin写法，通过mixin将store的与组件连接，功能是监听store带来的state变化并刷新到this.state
ReactMixin.onClass(Todo, Reflux.connect(store));

import Reflux from 'reflux'export default Reflux.createActions(['getAll','add','remove']);

import Reflux from 'reflux'
import actions from '../actions/actions'//给数组添加remove方法，用于去除指定下标的元素
Array.prototype.remove=function(dx)
{if(isNaN(dx)||dx>this.length){return false;}for(var i=0,n=0;i<this.length;i++){if(this[i]!=this[dx]){this[n++]=this[i]}}this.length-=1
};export default Reflux.createStore({items:[],//监听所有的actions
    listenables: [actions],//on开头的都是action触发后的回调函数
    onGetAll () {//更新状态（就是个对象）this.trigger({list:this.items});},onAdd(item){this.items.push({name:item});this.trigger({list:this.items});},onRemove(i){this.items.remove(i);this.trigger({list:this.items});}
});

import React from 'react';
import ReactDOM from 'react-dom';
import Todo from './components/todo';ReactDOM.render(<Todo></Todo>,document.querySelector('#app')
);

var path = require('path');
var webpack = require('webpack');module.exports = {entry: {app:path.join(__dirname, 'src'),vendors: ['react','reflux','react-mixin']},output: {path: path.join(__dirname, 'dist'),filename: '[name].js'},module: {loaders: [{test:/\.js?$/,exclude:/node_modules/,loader:'babel',query:{presets:['react','es2015']}}]},plugins: [new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')]
};