Redux系列02：一個炒雞簡單的react+redux例子

前言

在《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等庫使用，才能用到實戰中去。這部分會在後續展開 :)