TheJediCowboy TheJediCowboy - 4 months ago 56
React JSX Question

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;

Answer

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