Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Facebook api – Redux Dispatch Not Working in Action Creator

I have the following action creator(s) and for some reason, the code within the dispatch doesn’t execute, although I know that the loginSuccess() gets invoked because the first alert triggers. What am I doing wrong?

import facebook from '../api/facebook'
import * as types from '../constants/ActionTypes';

export function loginSuccess() {
  alert("This alerts fine");
  return dispatch => {
    alert("This doesn't alert");
  }
}

I am using Thunk (or at least think I am correctly) as can be seen below when creating the store.

import App from './containers/App';
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import configureStore from './store';
import createReducer from './reducers';
import { createStore, applyMiddleware } from 'redux'
import Parse from 'parse/react-native';
import { AsyncStorage } from 'react-native';
import Settings from './settings';
import thunk from 'redux-thunk'
import logger from 'redux-logger'

const settings = Settings.load();

const middleware = [ thunk, logger() ]

const store = createStore(
    createReducer(),
    applyMiddleware(...middleware)
)

function setup() {
    class Root extends Component {
        render() {
            return (
                <Provider store={store}>
                    <App />
                </Provider>
            );
         }
    }

    return Root;
}

module.exports = setup;

The component that is invoking loginSuccess() is shown below…

import { View, Text } from 'react-native';
import React, { Component,PropTypes } from 'react';
import { loginSuccess,loginError } from '../../../actions/application'
import {
 LoginButton,
 GraphRequest,
 GraphRequestManager,
 GraphRequestConfig,
} from 'react-native-fbsdk'


class FacebookLogin extends Component {

_onLoginSuccess(result){
    loginSuccess();
};

_onLoginError(error){
    loginError();
}

_onLoginCancelled(){

}

render(){
  return (
    <View>
      <LoginButton
        readPermissions={["email","public_profile","user_friends"]}
        onLoginFinished={
          (error, result) => {
            if (error) {
              this._onLoginError(error);
            } else if (result.isCancelled) {
              this._onLoginCancelled();
            } else {
              this._onLoginSuccess(result);
            }
          }
        }
        onLogoutFinished={() => alert("User logged out")}/>
    </View>
  );
}
}

FacebookLogin.propTypes = {
  navigator: PropTypes.object.isRequired,
};

export default FacebookLogin;
Tags:

2

Answers


  1. 0

    Yes you can dispatch function when you are using thunk middleware but next function should resolve to dispatching action. If you want to just call alert you do not have use dispatch for it. 

    export function loginSuccess() {
  alert("This alerts fine");
  return dispatch => {
    type: 'LOGIN_SUCCESS',
    alertText: 'This doesn't alert'
  }
}

    Or

    export function loginSuccess() {
  alert("This alerts fine");
  alertAction("This doesn't alert");
}

const alertAction = (text) => (dispatch) => ({
  type: 'LOGIN_SUCCESS',
  alertText: text
})
    Login or Signup to reply.
  2. 0

    There are a couple of errors in the FacebookLogin component.

    • The component is not connected to redux. Do something like export default connect()(FacebookLogin). You will need to import connect from react-redux
    • You need to dispatch the loginSuccesss action instead of directly calling it. So, you will need to do something like this.props.dispatch(loginSuccess())

    HTH

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search