1. 增加 login 模块的 action 和 reduce

src/routes/Home/HomeView.js → src/routes/Home/components/HomeView.js

@@ -56,4 +56,13 @@ export const HomeView = () => (
     </div>
 )
 
+HomeView.defaultProps = {
+    yanzhengma: 1234,
+}
+
+HomeView.propTypes = {
+    yanzhengma: React.PropTypes.number,
+    alertYanzhengma: React.PropTypes.func,
+}
+
 export default HomeView

src/routes/Login/components/LoginView.js

@@ -11,7 +11,7 @@ import classes from './LoginView.css'
 //     console.log(e);
 // }
 
-export const LoginView = () => (
+export const LoginView = (props) => (
   <div>
       <img
           src={background}
@@ -21,9 +21,12 @@ export const LoginView = () => (
           <img src={logo} alt="南方医院"/>
       </div>
       <div className="index-loginBox">
-          <h4>南方医务通医生工作台</h4>
+          <h4>南方医务通医生工作台{props.captchaStatus} a {props.captcha}</h4>
           <div className="loginForm">
-              <div style={{color: '#ff6f56',visibility: 'hidden'}}>您输入的动态密码有误</div>
+              {props.captchaStatus%2 != 0 ?
+                  (<div style={{color: '#ff6f56',visibility: 'visible'}}>您输入的动态密码有误</div>):
+                  (<div style={{color: '#ff6f56',visibility: 'hidden'}}>您输入的动态密码有误</div>)
+              }
               <ListGroup>
                   <ListGroupItem>
                       <Col lg={12} md={12} style={{paddingLeft: '5px'}}>
@@ -47,7 +50,7 @@ export const LoginView = () => (
               </ListGroup>
           </div>
           <div>
-              <Button bsStyle="primary" bsSize="large" block  style={{
+              <Button onClick={props.getcaptcha} bsStyle="primary" bsSize="large" block  style={{
                   marginTop: '50px',
                   height: '40px',
                   background: '#3988ff',
@@ -58,15 +61,24 @@ export const LoginView = () => (
           <h6 style={{textAlign: 'center',color: '#cacdd8'}}>
               点击登录，即表示已阅读并同意 <a href="" style={{color: '#3988ff'}}>《服务条款》</a>
           </h6>
-          {/*<div className="loginForm">*/}
-              {/*<div className="odd">*/}
-                  {/*<input className="oddInput" placeholder="手机号" type="text"/>*/}
-              {/*</div>*/}
-              {/*<input type="text"/>*/}
-          {/*</div>*/}
       </div>
 
   </div>
 )
 
+// 定义默认参数
+LoginView.defaultProps = {
+    captcha : 1234,
+    newcaptcha : 0,
+    // captchaStatus: 0
+}
+
+// 定义页面的参数
+LoginView.propTypes = {
+    captchaStatus: React.PropTypes.number,
+    newcaptcha: React.PropTypes.number,
+    captcha: React.PropTypes.number,
+    getcaptcha: React.PropTypes.func
+}
+
 export default LoginView

src/routes/Login/containers/LoginContainer.js

@@ -0,0 +1,35 @@
+import { connect } from 'react-redux'
+import {endcaptcha, getcaptcha} from '../modules/login'
+
+import LoginView from '../components/LoginView'
+
+//定义一个函数来生成 action ，action create
+const mapActionCreators = {
+    getcaptcha: () => getcaptcha(1),
+    endcaptcha: () => endcaptcha(0)
+    // increment: () => increment(1),
+    // doubleAsync,
+}
+
+//定义一个函数来接收 connect 传过来的state，返回需要传递给子组件的State，
+//connect会拿到返回的数据写入到react组件中，然后组件中就可以通过props读取数据
+const mapStateToProps = (state) => ({
+    // counter: state.counter,
+    captchaStatus: state.captchaStatus,
+})
+
+/*  Note: mapStateToProps is where you should use `reselect` to create selectors, ie:
+
+    import { createSelector } from 'reselect'
+    const counter = (state) => state.counter
+    const tripleCount = createSelector(counter, (count) => count * 3)
+    const mapStateToProps = (state) => ({
+      counter: tripleCount(state)
+    })
+
+    Selectors can compute derived data, allowing Redux to store the minimal possible state.
+    Selectors are efficient. A selector is not recomputed unless one of its arguments change.
+    Selectors are composable. They can be used as input to other selectors.
+    https://github.com/reactjs/reselect    */
+
+export default connect(mapStateToProps, mapActionCreators)(LoginView)

src/routes/Login/index.js

@@ -1,6 +1,29 @@
 import LoginView from './components/LoginView'
+import {injectReducer} from "store/reducers"
 
 // Sync route definition
-export default {
-  component: LoginView,
-}
+export default (store) => ({
+  // component: LoginView,
+    getComponent(nextState, cb) {
+        /*  Webpack - use 'require.ensure' to create a split point
+            and embed an async module loader (jsonp) when bundling
+            这里将 store 和 reducer 绑定，将 store 注入到路由下的 props 中去
+        */
+        require.ensure([], (require) => {
+            /*  Webpack - use require callback to define
+                dependencies for bundling   */
+            const Login = require('./containers/LoginContainer').default
+            const reducer = require('./modules/login').default
+
+            /*  Add the reducer to the store on key 'Login'  */
+            //key 是要绑定的数据字段
+            injectReducer(store, { key: 'captcha', reducer })
+            injectReducer(store, { key: 'captchaStatus', reducer })
+
+            /*  Return getComponent   */
+            cb(null, Login)
+
+            /* Webpack named bundle   */
+        }, 'Login')
+    },
+})

src/routes/Login/modules/login.js

@@ -1,54 +1,55 @@
 // ------------------------------------
 // Constants
 // ------------------------------------
-export const COUNTER_INCREMENT = 'COUNTER_INCREMENT'
+// export const COUNTER_INCREMENT = 'COUNTER_INCREMENT'\
+//定义各种 action 的状态
+export const CAPTCHA_GET = 'CAPTCHA_GET';
+export const CAPTCHA_END = 'CAPTCHA_END';
 
 // ------------------------------------
 // Actions
 // ------------------------------------
-export function increment(value = 1) {
-    return {
-        type: COUNTER_INCREMENT,
-        payload: value,
+export function getcaptcha(value = 1) {
+    return{
+        type: CAPTCHA_GET,
+        payload: value
+    }
+}
+export function endcaptcha(value = 0) {
+    return{
+        type: CAPTCHA_END,
+        payload: value
     }
 }
 
-/*  This is a thunk, meaning it is a function that immediately
-    returns a function for lazy evaluation. It is incredibly useful for
-    creating async actions, especially when combined with redux-thunk!
-
-    NOTE: This is solely for demonstration purposes. In a real application,
-    you'd probably want to dispatch an action of COUNTER_DOUBLE and let the
-    reducer take care of this logic.  */
-
-export const doubleAsync = () => (
-    (dispatch, getState) => (
-        new Promise((resolve) => {
-            setTimeout(() => {
-                dispatch(increment(getState().counter))
-                resolve()
-            }, 200)
-        })
-    )
-)
+// export function increment(value = 1) {
+//     return {
+//         type: COUNTER_INCREMENT,
+//         payload: value,
+//     }
+// }
 
 export const actions = {
-    increment,
-    doubleAsync,
+    getcaptcha,
+    endcaptcha
+    // increment,
+    // doubleAsync,
 }
 
 // ------------------------------------
 // Action Handlers
+// 定义 reduce 的 action 集合
 // ------------------------------------
 const ACTION_HANDLERS = {
-    [COUNTER_INCREMENT]: (state, action) => state + action.payload,
+    [CAPTCHA_GET]: (state, action) => state+action.payload,
+    [CAPTCHA_END]: (state, action) => state+action.payload,
 }
 
 // ------------------------------------
 // Reducer
 // ------------------------------------
 const initialState = 0
-export default function counterReducer(state = initialState, action) {
+export default function LoginReducer(state = initialState, action) {
     const handler = ACTION_HANDLERS[action.type]
 
     return handler ? handler(state, action) : state