媒介

在《Redux系列01：从一个简朴例子相识action、store、reducer》内里，我们已对redux的中心观点做了必要的解说。接下来，同样是经由过程一个简朴的例子，来解说如何将redux跟react运用连系起来。

我们晓得，在类flux框架设想中，单向数据流转的方向不过以下：

转换成redux的言语，就是这个模样。接下来就看现实例子，一个简朴到不存在实用价值的todo list。

例子：现实运转结果

本文的代码示例能够在github上下载，点击检察。README里有细致的运转步骤，照着做就能够了，这里也一同贴出来。

起首装置依靠项

npm install

假如还没装置browserify，那末也要装置一下

npm install -g browserify

然后，在当前目次运转以下剧本

browserify app.js -o bundle/app.js -t [ babelify --presets [ es2015 react ] ]

在浏览器里翻开index.html，就能够看到结果了。运转结果以下，很挫吧。。。

例子：现实代码

因为代码实在太简朴，这里就直接贴出来了。

actionCreator

起首，定义actionCreator。

// action creator
var addTodoActions = function(text){
    return {
        type: 'add_todo',
        text: text
    };
};

reducer

然后，定义reducer，能够看到是对add_todo事宜举行了处置惩罚

// reducers
var todoReducer = function(state, action){
    
    if(typeof state === 'undefined'){
        return [];
    }
    
    switch(action.type){
        case 'add_todo':
            return state.slice(0).concat({
                text: action.text,
                completed: false
            });
            break;
        default:
            return state;
    }
};

接着，以前面定义的reducer为参数，建立store。

store

var store = Redux.createStore(todoReducer);

将react跟store举行绑定

末了，到关键步骤啦，能够看到：

1. 在getInitialState里：经由过程store.getState()猎取数据举行初始的衬着。

2. 在componentDidMount里：监听store的状况变化，当状况变化时，触发onChange回调。

3. 在handleAdd里：经由过程store.dispatch(addTodoActions(value))修正state。（步骤二对这个举行了监听）
   4.在onChange里：猎取最新的state，并从新衬着视图

var App = React.createClass({
    getInitialState: function(){
        return {
            items: store.getState()
        };
    },
    componentDidMount: function(){
        var unsubscribe = store.subscribe(this.onChange);
    },
    onChange: function(){
        this.setState({
            items: store.getState()
        });
    },
    handleAdd: function(){
        var input = ReactDOM.findDOMNode(this.refs.todo);
        var value = input.value.trim();

        if(value)
            store.dispatch(addTodoActions(value));

        input.value = '';
    },
    render: function(){
        return (
            <div>
                <input ref="todo" type="text" placeholder="输入todo项" style={{marginRight:'10px'}} />
                <button onClick={this.handleAdd}>点击增加</button>
                <ul>
                    {this.state.items.map(function(item){
                        return <li>{item.text}</li>;
                    })}
                </ul>
            </div>            
            );
    }
});

ReactDOM.render(
    <App />, 
    document.getElementById('container')
    );

写在背面

全部例子看下来实在异常flux style，异常简朴，连异步都没有触及，所以也就不花过量篇幅举行解说，置信看下代码，跑下文中的demo就能够理解了。

现实项目不可能像文中的这么简朴，所以平常redux还要连系react-redux、redux-thunk等库运用，才用到实战中去。这部分会在后续睁开 :)