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")
);