Redux Dispatch 在 Action Creator 中不起作用 [英] Redux Dispatch Not Working in Action Creator

问题描述

我有以下动作创建者，由于某种原因，dispatch 中的代码没有执行，尽管我知道 loginSuccess()因为第一个警报触发而被调用.我做错了什么?

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");
  }
}

我正在使用 Thunk(或者至少我认为我是正确的)，如下图所示.

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;

调用 loginSuccess() 的组件如下所示...

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;

推荐答案

FacebookLogin 组件中有几个错误.

• 该组件未连接到 redux.执行类似export default connect()(FacebookLogin) 的操作.您需要从 react-redux
导入 connect
• 您需要调度 loginSuccesss 操作而不是直接调用它.所以，你需要做一些像 this.props.dispatch(loginSuccess())

• 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

这篇关于Redux Dispatch 在 Action Creator 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！