reducer举例

xcj-coding · Jul 7, 2016 · 924e4c7 · 924e4c7
1 parent ed5ea48
commit 924e4c7
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 55 deletions.
diff --git a/lib/app.js b/lib/app.js
@@ -6,7 +6,7 @@ import thunk from 'redux-thunk';
 import {createHistory, useBasename} from 'history';
 import {Router,Route,Link,IndexRoute,Redirect } from 'react-router';
 
-import reducer from './reducers/reducer';
+import {reducer} from './reducers/reducer';
 
 import HOME from './home';
 import CRUISE from './cruise/index';
@@ -17,26 +17,26 @@ const history = useBasename(createHistory)({
 	queryKey: true
 });
 
-let store = createStore(reducer);
+// const store = createStore(reducer);
 
-// const createStoreWithMiddleware = applyMiddleware(
-//   thunk
-// )(createStore);
+const createStoreWithMiddleware = applyMiddleware(
+  thunk
+)(createStore);
 
-// const store = createStoreWithMiddleware(reducer);
+const store = createStoreWithMiddleware(reducer);
 
 render(
 	<Provider store={store}>
-	<Router History={history}>
-		<Redirect from="/" to="/cruise" />
-		<Route path="cruise" component={CRUISE} name="游轮">
-			<Route path="/cruise" component={CRUISE} />
-		</Route>
-		<Route path="home" component={HOME} name="首页">
-			<Route path="/home" component={HOME} />
-		</Route>
-		<Route path="*" component={NotFound}/>
-	</Router>
+		<Router History={history}>
+			<Redirect from="/" to="/cruise" />
+			<Route path="cruise" component={CRUISE} name="游轮">
+				<Route path="/cruise" component={CRUISE} />
+			</Route>
+			<Route path="home" component={HOME} name="首页">
+				<Route path="/home" component={HOME} />
+			</Route>
+			<Route path="*" component={NotFound}/>
+		</Router>
 	</Provider>,
 	document.getElementById('app')
 )

diff --git a/lib/home.js b/lib/home.js
@@ -5,17 +5,17 @@ import {NavBottom,Slider,NewsList} from './common/common';
 import {change} from './actions/index';
 
 class Home extends Component {
-  constructor(props){
-    super(props)
-    document.title = props.route.name
-  }
+	constructor(props){
+		super(props)
+		document.title = props.route.name
+	}
 	render(){
 		let dispatch = this.props.dispatch;
 		return (
 			<div>
-				<button style={{display:"none"}} onClick={() => dispatch(change())}>切换title</button>
-				{this.props.show ? (<div className="block" style={{display:"none"}}>原生态</div>) :
-				(<header data-am-widget="header" className="am-header am-header-default" style={{display:"none"}}>
+				<button onClick={() => dispatch(change())}>切换title</button>
+				{this.props.show ? (<div className="block">title状态1</div>) :
+				(<header data-am-widget="header" className="am-header am-header-default">
 					<h1 className="am-header-title">
 						我的APP
 					</h1>
@@ -36,7 +36,7 @@ class Home extends Component {
         <NewsList />
 
         <NavBottom />
-			</div>
+		</div>
 		)
 	}
 };

diff --git a/lib/index.js b/lib/index.js
@@ -0,0 +1,51 @@
+import {connect} from 'react-redux';
+import React,{Component} from 'react';
+import {NavBottom,Slider,NewsList} from './common/common';
+
+import {change} from './actions/index';
+
+// document.title = this.state.name;
+
+
+class Index extends Component {
+  constructor(props){
+    super(props)
+    document.title = props.route.name
+  }
+	render(){
+		let dispatch = this.props.dispatch;
+		return (
+			<div>
+				<button style={{display:"none"}} onClick={() => dispatch(change())}>切换title</button>
+				{this.props.show ? (<div className="block" style={{display:"none"}}>原生态</div>) :
+				(<header data-am-widget="header" className="am-header am-header-default" style={{display:"none"}}>
+					<h1 className="am-header-title">
+						我的APP
+					</h1>
+				</header>)
+				}
+
+        <div className="countdown_div">距离2016高考还有<i className="color_f40_14">1000</i>天<i className="am-icon-gear am-icon-spin my_fr"></i></div>
+        <div className="home_square_div">
+          <ul>
+            <li><i>icon</i><p>院校评估</p></li>
+            <li><i>icon</i><p>专业分析</p></li>
+            <li><i>icon</i><p>性格测试</p></li>
+            <li><i>icon</i><p>高考生活</p></li>
+          </ul>
+        </div>
+        <div className="news_title">最新动态</div>
+
+        <NewsList />
+
+        <NavBottom />
+			</div>
+		)
+	}
+};
+
+function select(state){
+	return {show:state}
+};
+
+export default connect(select)(Index);
diff --git a/lib/reducers/reducer.js b/lib/reducers/reducer.js
@@ -1,31 +1,8 @@
-// function counter(state = 0, action) {
-//   switch (action.type) {
-//   case 'INCREMENT':
-//     return state + 1;
-//   case 'DECREMENT':
-//     return state - 1;
-//   default:
-//     return state;
-//   }
-// }
-
-// export default counter;
-
-// export const reducer = (state=false,action)=>{
-// 	switch(action.type){
-// 		case 'CHANGE' : 
-// 			return !state;
-// 		default : 
-// 			return state;
-// 	}
-// }
-
-
-export default function reducer(state,action){
-	switch(action.type){
-		case 'CHANGE' : 
-			return !state;
-		default : 
-			return state;
-	}
-}
+export const reducer = (state=false,action)=>{
+    switch(action.type){
+        case 'CHANGE' : 
+            return !state;
+        default : 
+            return state;
+    }
+}