<!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> 原文链接：https://www.f2er.com/react/305754.html
