登陆模拟效果完善

Demo12/src/actions/Login.js

@@ -1,31 +1,38 @@
 'use strict';
 import * as types from '../constants/ActionTypes';
 
+// 模拟服务器返回的用户信息
+let user = {
+  'name': 'admin',
+  'age': '24'
+}
+
 export function doLogin()
 {
   return dispatch => {
     dispatch(isLogining());
     // 模拟用户登录
-    let result = fetch('http://www.baidu.com')
+    let result = fetch('https://github.com/')
         .then((res)=>{
-          dispatch(loginSuccess(true));
+          dispatch(loginSuccess(true, user));
         }).catch((e)=>{
-          dispatch(loginSuccess(false));
+          dispatch(loginSuccess(false, null));
         });
   }
 }
 
 function isLogining()
 {
   return {
-    type: types.LOGIN_IN
+    type: types.LOGIN_IN_DOING
   }
 }
 
-function loginSuccess(isSuccess)
+function loginSuccess(isSuccess, user)
 {
   return{
-    type: types.LOGIN_IN_COMPLETED,
-    isSuccess: isSuccess
+    type: types.LOGIN_IN_DONE,
+    isSuccess: isSuccess,
+    user: user
   }
 }

Demo12/src/constants/ActionTypes.js

@@ -1,2 +1,3 @@
-export const LOGIN_IN = 'LOGIN_IN';
-export const LOGIN_IN_COMPLETED = 'LOGIN_IN_COMPLETED';
+export const LOGIN_IN_INIT = 'LOGIN_IN_INIT'; // 初始状态
+export const LOGIN_IN_DOING = 'LOGIN_IN_DOING'; // 正在登陆
+export const LOGIN_IN_DONE = 'LOGIN_IN_DONE'; // 登陆完成

Demo12/src/pages/LoginPage.js

@@ -17,20 +17,33 @@ class LoginPage extends Component {
 
   shouldComponentUpdate(nextProps, nextState)
   {
-    if (nextProps.isSuccess) {
-      this.props.navigator.push({
+    // 登陆完成，且成功登陆
+    if (nextProps.status === 'done' && nextProps.isSuccess) {
+      this.props.navigator.replace({
         id: 'MainPage',
-        component: MainPage
+        component: MainPage,
+        passProps: {
+           user: nextProps.user
+        },
       });
       return false;
     }
     return true;
   }
 
   render() {
+    let tips;
+    if (this.props.status === 'init')
+    {
+      tips = '请点击登陆';
+    }
+    else if (this.props.status === 'doing')
+    {
+      tips = '正在登陆...';
+    }
     return (
       <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'column'}}>
-        <Text>{'loading:' + this.props.loading + '\nisSuccess:' + this.props.isSuccess}</Text>
+        <Text>{tips}</Text>
         <TouchableOpacity style={{backgroundColor: '#FF0000'}} onPress={this.handleLogin.bind(this)}>
           <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center', width: 100, height: 50}}>
             <Text style={{color: '#FFFFFF', fontSize: 20}}>登录</Text>
@@ -49,8 +62,9 @@ class LoginPage extends Component {
 function select(store)
 {
   return {
-    loading: store.loginIn.loading,
-    isSuccess: store.loginIn.isSuccess
+    status: store.loginIn.status,
+    isSuccess: store.loginIn.isSuccess,
+    user: store.loginIn.user
   }
 }
 

Demo12/src/pages/MainPage.js

@@ -10,8 +10,8 @@ import {
 export default class MainPage extends Component {
   render() {
     return (
-      <View style={styles.container}>
-        <Text>登陆成功，欢迎使用</Text>
+      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'column'}}>
+        <Text>{'姓名:' + this.props.user.name + '\n年龄:' + this.props.user.age}</Text>
       </View>
     );
   }

Demo12/src/reducers/Login.js

@@ -3,20 +3,30 @@
 import * as types from '../constants/ActionTypes';
 
 const initialState = {
-  loading: false,
+  status: 'init',
   isSuccess: false,
+  user: null,
 }
 
 export default function loginIn(state = initialState, action) {
   switch (action.type) {
-    case types.LOGIN_IN:
+    case types.LOGIN_IN_INIT:
       return Object.assign({}, state, {
-        loading: true
+        status: 'init',
+        isSuccess: false,
+        user: null
       });
-    case types.LOGIN_IN_COMPLETED:
+    case types.LOGIN_IN_DOING:
       return Object.assign({}, state, {
-        loading: false,
-        isSuccess: action.isSuccess
+        status: 'doing',
+        isSuccess: false,
+        user: null
+      });
+    case types.LOGIN_IN_DONE:
+      return Object.assign({}, state, {
+        status: 'done',
+        isSuccess: action.isSuccess,
+        user: action.user
       })
     default:
       return state;