您的位置：首页 > Web前端 > React
react,react-router,react-redux最简单例子

2016-10-13 15:57 796 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/ReactRouter.js"></script>
<script src="js/browser.min.js"></script>
<script type="text/javascript" src="js/redux.js" ></script>
<script type="text/javascript" src="js/react-redux.js" ></script>
<script type="text/javascript" src="js/redux-thunk.js" ></script>
<title>react-redux和react-router的应用</title>
</head>
<body>
<div id="app"></div>
<script>
//初始化store值传入,这个值就是后端渲染后能得到的一个值，生成前端js时把这个值放入后。就加载后端渲染后的html的当前状态了。
var initialState={counter:10,loginer:true};
</script>
<script type="text/babel">
//import组件
let { Component, PropTypes } =React;
let {connect,Provider}=ReactRedux;
let {combineReducers,applyMiddleware,createStore}=Redux;
let { Router, Route, Link, browserHistory, hashHistory,IndexRoute,Redirect} =ReactRouter;

/****************************************************************************************/
//1.组件js
let Counter = React.createClass({
componentWillMount:function() {
console.log('Component WILL MOUNT!');
console.log("loginer----->"+this.props.loginer);
console.log("counter----->"+this.props.counter);
},
render:function() {
//从组件的props属性中导入四个方法和一个变量
const { increment, incrementIfOdd, incrementAsync, decrement, counter } = this.props;
//渲染组件，包括一个数字，四个按钮
return (
<p>
Clicked: {counter} times
{' '}
<button onClick={increment}>+</button>
{' '}
<button onClick={decrement}>-</button>
{' '}
<button onClick={incrementIfOdd}>Increment if odd</button>
{' '}
<button onClick={() => incrementAsync()}>Increment async</button>
</p>
)
}
});
//限制组件的props安全
Counter.propTypes = {
//increment必须为fucntion,且必须存在
increment: PropTypes.func.isRequired,
incrementIfOdd: PropTypes.func.isRequired,
incrementAsync: PropTypes.func.isRequired,
decrement: PropTypes.func.isRequired,
//counter必须为数字，且必须存在
counter: PropTypes.number.isRequired
};

//2.action.js
const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
const DECREMENT_COUNTER = 'DECREMENT_COUNTER';

var incrementFun=function(){
return {
type: INCREMENT_COUNTER
}
};
var decrementFun=function(){
return {
type: DECREMENT_COUNTER
}
};
let CounterActions={
increment:incrementFun,
decrement:decrementFun,
incrementIfOdd:function(){
return (dispatch, getState) => {
//获取state对象中的counter属性值
const { counter } = getState()

//偶数则返回
if (counter % 2 === 0) {
return
}
//没有返回就执行加一
dispatch(incrementFun())
}
},
incrementAsync:function(delay = 1000) {
return dispatch => {
setTimeout(() => {
dispatch(decrementFun())
}, delay)
}
}
};

//3.containers容器js
//将state.counter绑定到props的counter
function mapStateToProps(state) {
return {
counter: state.counter,
loginer: state.loginer
}
}
//通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上
let CounterContainer=connect(mapStateToProps, CounterActions)(Counter);

//4.reducers.js
let counter=function(state = 0, action) {
console.log("=counter=====>"+state);
switch (action.type) {
case INCREMENT_COUNTER:
return state + 1
case DECREMENT_COUNTER:
return state - 1
default:
return state
}
};

const LOGIN_LOGINING = 'LOGIN_LOGINING';
const LOGIN_OUT = 'LOGIN_OUT';

var loginFun=()=>{return {type:LOGIN_LOGINING}};
var loginoutFun=()=>{return {type:LOGIN_OUT}};

let loginer=function(state = false, action){
console.log("=loginer=====>"+state);
switch (state.type) {
case INCREMENT_COUNTER:
return state
case DECREMENT_COUNTER:
return state
default:
return state
}
}
/****************************************************************************************/
let Login = React.createClass({render() {
return (<div>还没有登录</div>);
}});

let App = React.createClass({render() {
return (<div>
{this.props.children}
</div>);
}});

/****************************************************************************************/
//使用redux的combineReducers方法将所有reducer打包起来
const rootReducer = combineReducers({
counter,loginer
});//这种赋值是es6

//5.store.js加载reduer ReduxThunk
const createStoreWithMiddleware = applyMiddleware(
ReduxThunk.default //为nodejs时用ReduxThunk
)(createStore);

const configureStore = function(initialState) {
const store = createStoreWithMiddleware(rootReducer , initialState);
return store;
};

const store = configureStore(initialState);//设置
let checkLogin=(params, replace)=>{
console.log("=======>"+store.getState().loginer);
if(store.getState().loginer){
return true;
}else{
replace("/login");
}
};
ReactDOM.render(
<Provider store={store}>
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={CounterContainer} onEnter={checkLogin}/>
<Route path="/login" component={Login}/>
</Route>
</Router>
</Provider>
, document.getElementById('app'));
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航