react,react-router,react-redux最简单例子

发布时间：2020-12-15 08:24:34 所属栏目：百科来源：网络整理
导读：!DOCTYPE htmlhtmlheadmeta charset="UTF-8"script src="js/react.js"/scriptscript src="js/react-dom.js"/scriptscript src="js/ReactRouter.js"/scriptscript src="js/browser.min.js"/scriptscript type="text/javascript" src="js/redux.js" /scriptscr
<!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>
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!