reactx登錄facebook facebook

Question

我正在學習反應，並找到了REDX。我正在使用REDX登錄Facebook。

我對我的行爲採取行動的文件夾一樣actions/facebook.js

import * as types from '../constants/ActionTypes' 

export function loginSuccess(response){ 
    return dispatch => { 
    dispatch({ response, type: types.FB_LOGIN }); 
    }; 
} 


export function login(){ 

    window.fbAsyncInit = function() { 
     FB.init({ 
      appId  : '172141521144545437894', 
      cookie  : true, 
      xfbml  : true, 
      version : 'v2.1' 
     }); 


     FB.getLoginStatus(function(response) { 
      this.statusChangeCallback(response); 
      }.bind(this)); 
     }.bind(this); 

     (function(d, s, id) { 
      var js, fjs = d.getElementsByTagName(s)[0]; 
      if (d.getElementById(id)) return; 
      js = d.createElement(s); js.id = id; 
      js.src = "//connect.facebook.net/en_US/sdk.js"; 
      fjs.parentNode.insertBefore(js, fjs); 
      }(document, 'script', 'facebook-jssdk')); 

    function fetchUser() { 
     console.log('Welcome! Fetching your information.... '); 
     FB.api('/me', function(response) { 
     console.log('Successful login for: ' + response.name); 
     }); 
    }; 

    function statusChangeCallback(response) { 
     console.log('statusChangeCallback'); 
     console.log(response); 

     if (response.status === 'connected') { 
      console.log(response.authResponse.accessToken); 
      this.fetchUser(); 
     } else if (response.status === 'not_authorized') { 
      console.log("Not authorised"); 
     } else { 
      console.log("Please log in to facebook"); 
     } 
    }; 

    function checkLoginState() { 
     FB.getLoginStatus(function(response) { 
     this.statusChangeCallback(response); 
     }.bind(this)); 
     dispatch(loginSuccess(response)) 
    }; 

    function handleLogin() { 
     FB.login(this.checkLoginState()); 
    }; 

    function handleLogout(){ 
     FB.logout(function(response) {}); 

    }; 
} 

和我有一樣reducers/Login.js

import { FB_LOGIN } from '../constants/ActionTypes' 

const initialState = [ 
    { 
    accessToken = null, 
    isLoggedIn: false, 
    isLoggedOut: true, 
    userData: [] 
    } 
] 

export default function pvlogin(state = initialState, action) { 
    if action.type === FB_LOGIN 
    switch (action.type) { 
    case FB_LOGIN: 
     return 
     { 
      accessToken: action.authResponse.accessToken, 
      isLoggedIn: true, 
      isLoggedOut: false, 
     }, 
    default: 
     return state 
    } 
} 

和我reducers/index.js

import * as ActionTypes from '../actions' 
    import { routerStateReducer as router } from 'redux-router' 
    import { combineReducers } from 'redux' 

    const rootReducer = combineReducers({ 
     pvlogin, 
    }) 

    export default rootReducer 

and my container to handle this.. `containers/Login.js` 

    import { bindActionCreators } from 'redux' 
import { connect } from 'react-redux' 
import Login from '../components/Login' 
import * as FbActions from '../actions/facebook' 

function mapStateToProps(state) { 
    return { 
    login: state.pvlogin 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators(FbActions, dispatch) 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Login) 

和我的商店減速看起來像

import { createStore, applyMiddleware } from 'redux' 
import thunk from 'redux-thunk' 
import rootReducer from '../reducers' 

const createStoreWithMiddleware = applyMiddleware(
    thunk 
)(createStore) 

export default function configureStore(initialState) { 
    const store = createStoreWithMiddleware(reducer, initialState) 

    if (module.hot) { 
    // Enable Webpack hot module replacement for reducers 
    module.hot.accept('../reducers',() => { 
     const nextReducer = require('../reducers') 
     store.replaceReducer(nextReducer) 
    }) 
    } 

    return store 
} 

和我的登錄

組件

import React, { Component, PropTypes } from 'react' 

class Login extends Component{ 
    console.log("inside login") 

    render() { 
    const { login } = this.props 
    return (
     <div> 
     <a href="#" onClick={login.handleLogin}>Login with Facebook</a> 
     </div> 
    ) 
    } 
} 

Login.propTypes = { 
    login: PropTypes.func.isRequired 
} 

export default Login 

最後我index.js

import React from 'react' 
import { render } from 'react-dom' 
import { Provider } from 'react-redux' 
import Login from './containers/Login' 
import configureStore from './store/configureStore' 

const store = configureStore() 

    render(
     <Provider store={store}> 
     <Login /> 
     </Provider>, 
     document.getElementById('root') 
    ) 

我很新，從幾個小時反應，終極版..我這個搞亂也沒有得到任何頭出..

任何人都可以建議我如何處理Facebook登錄..

Answer 1

看看這個組件http://react-components.com/component/react-facebook-login2