React native& redux:facebook登录错误

时间:2017-03-13 20:54:17

标签: facebook react-native redux

我尝试使用react native sdk和redux创建facebook登录, 我在代码上工作很多但是当我刷新我的应用程序时仍然有这个错误:

Cannot read property 'error' of undefined

我不明白为什么,因为我在每个文件中都正确导入了所有文件..

减速器:

import { LOADING, ERROR, LOGIN, LOGOUT } from '../actions/types';

function loginReducer(state = {loading: false, loggedIn: false, error: null}, action) {
  switch(action.type) {
    case LOADING:
      return Object.assign({}, state, {
        loading: true
      });
    case LOGIN:
      return Object.assign({}, state, {
        loading: false,
        loggedIn: true,
        error: null,
      });
    case LOGOUT:
      return Object.assign({}, state, {
        loading: false,
        loggedin: false,
        error: null
      });
    case ERROR:
      return Object.assign({}, state, {
        loading: false,
        loggedin: false,
        error: action.err
      });
    default:
      return state;
  }
}

export default loginReducer;

reducer的索引文件:

import { combineReducers } from 'redux';
import loginReducer from './authReducer';
import profileReducer from './profileReducer';

export default combineReducers({
  auth: loginReducer
});

行动:

import {
  LOADING,
  ERROR,
  LOGIN,
  LOGOUT,
  ADD_USER
} from './types';
import { facebookLogin, facebookLogout } from '../src/facebook';

export function attempt() {
  return {
    type: LOADING
  };
}

export function error(err) {
  return {
    type: ERROR,
    err
  };
}

export function loggedin() {
  return {
    type: LOGIN
  };
}

export function loggedout() {
  return {
    type: LOGOUT
  };
}

export function addUser(id, name, profileURL, profileWidth, profileHeight) {
  return {
    type: ADD_USER,
    id,
    name,
    profileURL,
    profileWidth,
    profileHeight
  };
}

export function login() {
  return dispatch => {
    dispatch(attempt());
    facebookLogin().then((result) => {
      dispatch(loggedin());
      dispatch(addUser(result.id, result.name, result.picture.data.url, result.picture.data.width, result.data.height));
    }).catch((err) => {
      dispatch(error(err));
    });
  };
}

export function logout() {
  return dispatch => {
    dispatch(attempt());
    facebookLogout().then(() => {
      dispatch(loggedout());
    })
  }
}

facebook API:

import {
  LoginManager,
  AccessToken,
  GraphRequest,
  GraphRequestManager,
} from 'react-native-fbsdk';

const facebookParams = 'id,name,email,picture.width(100).height(100)';

export function getInfo() {
  return new Promise((resolve, reject) => {
    const profileInfoCallback = (error, profileInfo) => {
      if (error) reject(error);

      resolve(profileInfo);
    };

    const profileInfoRequest =
      new GraphRequest(
        '/me',
        {
          parameters: {
            fields: {
              string: facebookParams,
            },
          },
        },
        profileInfoCallback
      );

    new GraphRequestManager().addRequest(profileInfoRequest).start();
  });
}

export function facebookLogin() {
  return new Promise((resolve, reject) => {
    LoginManager.logInWithReadPermissions(['public_profile', 'user_friends', 'email'], (error, result) => {
      if(error) {
        reject('error: ' + error);
      } else {
        if(result.isCancelled) {
          reject('error: login cancelled');
        } else {
          getInfo().then((userDetails) => {
            resolve(userDetails);
          }).catch((requestError) => {
            reject(requestError);
          });
        }
      }
    });
  });
}

export function facebookLogout() {
  return new Promise((resolve) => {
    LoginManager.logOut();
    return resolve();
  });
}

和登录容器:

import React, { Component } from 'react';
import { View, text, ActivityIndicatorIOS } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../../actions';
import LoginButton from '../../components/Login';
import reducers from '../../reducers';
import { Card, CardSection, Button } from '../../components/common';


class Login extends Component {
  render() {
    const { actions, auth } = this.props;
    let loginComponent = <Login onLoginPressed={() => actions.login()} />;
    if(auth.error) {
      loginComponent = <View><Login onLoginPressed={() => actions.login()} /><Text >{auth.error}</Text></View>;
    }
    if (auth.loading) {
      loginComponent = <ActivityIndicatorIOS size="large" color="#3b5998" />;
    }
    return(
      <View>
        { auth.loggedIn ? this.props.navigation.navigate('Home') : loginComponent }
      </View>
    );
  }
}

function mapStateToProps(state) {
  return {
    auth: state.auth
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actionCreators, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

Doest有人知道错误在哪里吗?

谢谢!

修改

减速器/ index.js

import { combineReducers } from 'redux';
import loginReducer from './authReducer';
import profileReducer from './profileReducer';

export default combineReducers({
  auth: loginReducer
});

错误屏幕: enter image description here

0 个答案:

没有答案