我尝试使用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
});