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;

回答1:

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

回答2:

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'
  }
}

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

const alertAction = (text) => (dispatch) => ({
  type: 'LOGIN_SUCCESS',
  alertText: text
})

来源：https://stackoverflow.com/questions/38758366/redux-dispatch-not-working-in-action-creator

标签

reactjs

react-native

redux

react-redux