准备工作
先导入必要的库资源
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")
);
