2
我想在我的應用程序上創建一個Facebook登錄，使用react-native，redux和react-native-fbsdk。其實，我的臉AA問題，當我在第一狀態（未登錄）我看到這個狀態：React native redux fbsdk登錄
，當我點擊登錄按鈕我有這樣的狀態：
的認證設置爲true，但認證申請入住了，即使我喜歡等待5分鐘。我認爲它缺少在我的代碼沒有什麼事情發生後，但我不知道什麼。
我過去我的代碼在這裏。
減速機：
import {
AUTH_SUCCESS,
AUTH_FAILURE,
AUTH_STARTED,
AUTH_ERROR,
AUTH_FAILURE_REMOVE,
LOGOUT
} from '../actions/types';
const initialState = {
authenticating: false,
authToken: null,
authError: null,
facebookToken: null,
facebookProfile: null
}
function authReducer(state = initialState, action) {
switch(action.type) {
case AUTH_STARTED:
return Object.assign({}, state, {
authenticating: true,
loginText: 'Connexion..'
});
case AUTH_SUCCESS:
return Object.assign({}, state, {
authenticating: false,
authToken: action.authToken,
facebookToken: action.facebookToken,
facebookProfile: action.facebookProfile,
});
case AUTH_FAILURE:
return Object.assign({}, state, {
authenticating: false,
authError: action.authError.message,
});
case AUTH_FAILURE_REMOVE:
return Object.assign({}, state, {
authError: null,
});
case LOGOUT:
return Object.assign({}, state, {
authenticating: false,
authToken: null,
facebookToken: null,
facebookProfile: null,
loginText: null,
});
default:
return state;
}
}
export default authReducer;
動作：（所有行動都是在單獨的文件名爲types.js）
import { facebookLoginAPI, getFacebookInfoAPI } from '../src/facebook';
import { getServerAuthToken } from '../src/auth';
import {
AUTH_STARTED,
AUTH_SUCCESS,
AUTH_FAILURE,
AUTH_ERROR,
AUTH_FAILURE_REMOVE,
LOGOUT
} from './types';
export function authStarted() {
return {
type: AUTH_STARTED,
};
}
export function authSuccess(facebookToken, facebookProfile, serverAuthToken){
return {
type: AUTH_SUCCESS,
facebookToken,
facebookProfile,
authToken: serverAuthToken,
};
}
export function authFailure(authError){
return {
type: AUTH_FAILURE,
authError,
};
}
export function authFailureRemove() {
return {
type: AUTH_FAILURE_REMOVE,
};
}
export function logout() {
return {
type: LOGOUT,
};
}
export function facebookLogin() {
return (dispatch) => {
dispatch(authStarted());
const successValues = [];
facebookLoginAPI().then((facebookAuthResult) => {
successValues.push(facebookAuthResult.accessToken);
return getFacebookInfoAPI(facebookAuthResult.accessToken);
}).then((facebookProfile) => {
successValues.push(serverAuthToken);
dispatch(authSuccess(...successValues));
}).catch((error) => {
dispatch(authFailure(error));
setTimeOut(() => {
dispatch(authFailureRemove());
}, 4000);
});
};
}
Facebook的API：
import {
LoginManager,
AccessToken,
GraphRequest,
GraphRequestManager,
} from 'react-native-fbsdk';
const facebookParams = 'id,name,email,picture.width(100).height(100)';
export function facebookLoginAPI() {
return new Promise((resolve, reject) => {
LoginManager.logInWithReadPermissions(['public_profile', 'user_friends', 'email'])
.then((FBloginResult) => {
if (FBloginResult.isCancelled) {
throw new Error('Login cancelled');
}
if (FBloginResult.deniedPermissions) {
throw new Error('We need the requested permissions');
}
return AccessToken.getCurrentAccessToken();
console.log(FBloginResult);
})
.then((result) => {
resolve(result);
})
.catch((error) => {
reject(error);
});
});
}
export function getFacebookInfoAPI() {
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 getFacebookFriends() {
return new Promise((resolve, reject) => {
const profileInfoCallback = (error, profileInfo) => {
if (error) reject(error);
console.log(profileInfo);
resolve(profileInfo);
};
const profileFriendsRequest =
new GraphRequest(
'/me/friends',
{
parameters: {
fields: {
string: facebookParams,
},
},
},
profileInfoCallback
);
new GraphRequestManager().addRequest(profileFriendsRequest).start();
});
}
上註冊的按鈕：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View } from 'react-native';
import { bindActionCreators } from 'redux';
import { facebookLogin } from '../../actions/auth';
import { Button } from '../common';
import FBSDK, { LoginManager } from 'react-native-fbsdk';
class Login extends Component {
componentWillMount() {
this.authCheck(this.props.authToken);
}
componentWillReceiveProps(nextProps) {
this.authCheck(nextProps.authToken);
}
authCheck(authToken){
if (authToken) {
return authToken;
}
}
renderError() {
if(this.props.authError){
console.log(this.props.authError);
}
return null;
}
render() {
return(
<Button onPress={this.props.onLoginPressed}> Login with facebook </Button>
);
}
}
export default Login;
而AuthContainer：
import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { facebookLogin } from '../actions/auth';
import Login from '../components/Login';
class AuthContainer extends Component {
onLoginPressed() {
this.props.actions.facebookLogin();
console.log(this.props);
}
render(){
console.log(this.props);
return (
<Login {...this.props} onLoginPressed={this.onLoginPressed.bind(this)} />
);
}
}
AuthContainer.propTypes = {
welcomeText: PropTypes.string,
authenticating: PropTypes.bool.isRequired,
authToken: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.string,
]),
authError: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.string,
]),
actions: PropTypes.shape({
facebookLogin: PropTypes.func.isRequired,
}).isRequired,
};
function mapStateToProps(state) {
return {
authenticating: state.auth.authenticating,
authToken: state.auth.authToken,
authError: state.auth.authError,
loginText: state.auth.loginText,
};
console.log(state);
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ facebookLogin }, dispatch),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(AuthContainer);
和App.js：
import React, { Component } from 'react';
import { Text, View, AsyncStorage } from 'react-native';
import { createStore, compose, applyMiddleware } from 'redux';
import { connect, Provider } from 'react-redux';
import { persistStore } from 'redux-persist';
import thunkMiddleware from 'redux-thunk';
import reducers from './reducers';
import { Header, Card, CardSection } from './components/common';
import AuthContainer from './containers/AuthContainer';
const store = compose(
applyMiddleware(thunkMiddleware)
)(createStore)(reducers);
persistStore(store, { storage: AsyncStorage });
class App extends Component {
render() {
return(
<Provider store={store}>
<View>
<Header headerText="Kiwee" />
<Card>
<CardSection>
<AuthContainer />
</CardSection>
</Card>
</View>
</Provider>
);
}
}
export default App;
是否有人能幫助我嗎？這對我來說非常重要，我通過了一個月的搜索解決方案，沒有任何迴應。
我不知道，但你可以嘗試刪除.push（）函數從你的減速器，因爲它是mutating操作。嘗試使用concat或展開操作rator。像嘗試更換successValues.push（facebookAuthResult.accessToken）;與[... successValues，..facebookAuthResult。accessToken] –
@ManjeetSingh是的，它的工作！謝謝你的傢伙！但現在，你知道爲什麼我無法將accessToken放入authToken狀態嗎？ –
好吧，加入這個答案，也可以幫助其他人 –