react-redux最简单的例子

<!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的应用</title>
	</head>
	<body>
		<div id="app"></div>
		<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({
				render() {
				    //从组件的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
			  }
			}
			//通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上
			let App=connect(mapStateToProps,CounterActions)(Counter);
			
			//4.reducers.js
			let counter=function(state = 0,action) {
				console.log("======>"+state);
			  switch (action.type) {
			    case INCREMENT_COUNTER:
			      return state + 1
			    case DECREMENT_COUNTER:
			      return state - 1
			    default:
			      return state
			  }
			};
			//使用redux的combineReducers方法将所有reducer打包起来
			const rootReducer = combineReducers({
			  counter
			});//这种赋值是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;
			};
			
			
			//初始化store值传入,这个值就是后端渲染后能得到的一个值，生成前端js时把这个值放入后。就加载后端渲染后的html的当前状态了。
			let initialState={counter:10};
			const store = configureStore();//设置
			ReactDOM.render(
				<Provider store={store}>
			      <App />
			    </Provider>,document.getElementById('app'));
		</script>
	</body>
</html>
react-redux最简单的例子

相关文章
