react 组件连动效果_react-redux应用之独立组件联动实例

准备工作

先导入必要的库资源

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(

{current}

);

}

});

//输入框

var Input=React.createClass({

getEndValue:function(){

store.dispatch(updateValue(this.refs.endValue.value));

},

render:function(){

var getEndValue = this.props.getEndValue;

return (

);

}

});

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(

,document.getElementById("exm"),function(){

store.dispatch(updateValue(32))

}

);

ReactDOM.render(

,document.getElementById("exm2")

);