React native redux fbsdk login

Question

Ich möchte einen Facebook-Login auf meiner App, mit reactive-native, redux und react-native-fbsdk erstellen. Eigentlich bin ich von Angesicht zu aa Problem, wenn ich auf den ersten Zustand bin (nicht angemeldet) Ich sehe diesen Zustand:

und wenn ich auf den Login-Button klicken habe ich diesen Zustand:

das Authentifizierungs auf true gesetzt, aber die Anwendung Aufenthalt auf Authentifizierung, und auch wenn ich wie 5 Minuten warten, nachdem es ist nichts passiert .. ich denke, dass es etwas in meinem Code fehlt, aber ich weiß nicht weiß was.

Ich hinter meinem Code hier.

Der Druckminderer:

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; 

Die Aktion: (alle Aktionen sind in separaten Datei namens 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); 
    }); 
    }; 
} 

Die 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(); 
    }); 
} 

Der Button für die Anmeldung:

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; 

Und die 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); 

und die 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; 

Hilft mir jemand könnte? Es ist wirklich wichtig für mich, das zu tun, und ich habe 1 Monat auf der Suche nach einer Lösung ohne irgendwelche Antworten ..

Answer 1

versuchen, .push() -Funktion von Ihren Reduzierungen zu entfernen, wie es muting Operation ist. Versuchen Sie concat oder Spread zu verwenden Operator. wie versuchen, zu ersetzen

successValues.push (facebookAuthResult.accessToken);

mit

[... successValues, ..facebookAuthResult.accessToken]

es etwas zu Unveränderlichkeit verwandt ist, können Sie das in redux Tutorial überprüfen oder auf finden google (Ich bin nicht in der richtigen Position, um dieses Verhalten jetzt zu erklären)