react-redux應用之獨立組件聯動實例

該實例源代碼下載地址：https://github.com/Johnharvy/processBar

准備工作

先導入必要的庫資源

import React, { Component, PropTypes } from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux';

准備兩個ui組件

//進度條
var ProcessBar = React.createClass({
    render:function(){
       var current = this.props.current;
        return(
            <div className="progress">
                <div className="progress-bar" style={{width:current}}>{current}</div>
            </div>
        );
    }
});

//輸入框
var Input=React.createClass({
    getEndValue:function(){
        store.dispatch(updateValue(this.refs.endValue.value));
    },
    render:function(){
        var getEndValue = this.props.getEndValue;
        return (
            <div>
                <input type="text"  ref="endValue" placeholder="請輸入值" onChange={this.getEndValue}/>
            </div>
        );
    }
});    

Input組件中的“store.dispatch()用來每次發布輸入框的值改變進度條的狀態”。如果你對store不熟悉，請看我上篇關於redux應用的博文。

設置action與每次調用action返回值重新計算state的reducer

需要提示一點，action返回的對象必須包括一個屬性type，為了與其他組件狀態區分開，reducer返回的對象為存儲狀態的新store對象，如果與store綁定，則每次stroe發布action都會觸發reducer函數，action為默認傳進reducer函數的第二個參數，第一個為當下動作之前的初始狀態。

 //Action
var updateValue = function(curValue){
    return{
        type:"normal",
        value:curValue,
        initValue : 0,
        totalValue : 100,
    };
}

//reducer
    var  reducer = function(state,action){
    var _v;
    if(action.value < 0)  _v = 0;
    else if(action.value > 100) _v = 100;
    else _v = action.value;
    return{
        currentValue:(_v - action.initValue) / action.totalValue * 100 + "%"
    };

}

//狀態存儲對象
var store = createStore(reducer);                                                                                      

設置mapStateToPro用來指定狀態state與ui組件屬性一一對應

//進度條框
var mapStateToPro = function(state){
    return{
       current : state.currentValue
    };
}

設置狀態組件綁定ui組件

//狀態組件綁定ui組件
var App = connect(
    mapStateToPro
)(ProcessBar);

最后渲染到dom中

//渲染
ReactDOM.render(
   <Provider store={store}>
       <App/>
   </Provider>,document.getElementById("exm"),function(){
        store.dispatch(updateValue(32))
    }
);

ReactDOM.render(
   <Input/>,document.getElementById("exm2")
);