React Native fbsdk redux authToken 未定义

Question

我尝试使用 react-native 和 redux 实现 facebook 登录，但我遇到了一个问题：

在我的控制台中，我有用户的所有信息，但在 redux 的对象中，authToken 是未定义的，我不明白为什么.. 这是我的代码

app/src/facebook.js

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);
      console.log(result);
    })
    .catch((error) => {
      reject(error);
      console.log(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 { 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, ...facebookAuthResult.accessToken];
      return getFacebookInfoAPI(facebookAuthResult.accessToken);
    }).then((facebookProfile) => {
      [...successValues, ...facebookProfile];
      return getServerAuthToken();
    }).then((serverAuthToken) => {
      [...successValues, ...serverAuthToken];
      dispatch(authSuccess(...successValues));
    }).catch((error) => {
      dispatch(authFailure(error));
      setTimeout(() => {
        dispatch(authFailureRemove());
      }, 4000);
    });
  };
}

和减速器：

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;

我需要了解什么是 authToken，为什么在我的情况下他是未定义的？认证是否成功..我不知道！

谢谢！

Answer 1

以下代码对我来说有点可疑

export function facebookLogin() {
  return (dispatch) => {
    dispatch(authStarted());
    const successValues = [];
    facebookLoginAPI()
    .then((facebookAuthResult) => {
      [...successValues, ...facebookAuthResult.accessToken];   //remove this line 
      return getFacebookInfoAPI(facebookAuthResult.accessToken);
    }).then((facebookProfile) => {
      [...successValues, ...facebookProfile]; //remove this seems of no use
      return getServerAuthToken();  //I think you may need to pass something here
    }).then((serverAuthToken) => {
      [...successValues, ...serverAuthToken];    //pass this value in authSuccess below instead of ...successValues (it may still be [])
      dispatch(authSuccess(...successValues));
    }).catch((error) => {
      dispatch(authFailure(error));
      setTimeout(() => {
        dispatch(authFailureRemove());
      }, 4000);
    });
  };
}

React Native fbsdk redux authToken 未定义

React Native fbsdk redux authToken undefined

javascript

facebook

react-native

react-redux