Redux Dispatch 在 Action Creator 中不起作用

Question

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

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（或者至少认为我是正确的），如下面创建商店时所示。

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() 的组件如下所示...

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 1

是的，您可以在使用 thunk 中间件时分派函数，但下一个函数应该解析为分派操作。如果你只想打电话给警报，你就没有使用调度。

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

Answer 2

FacebookLogin 组件中存在一些错误。

组件未连接到 redux。做类似 export default connect()(FacebookLogin) 的事情。您需要从 react-redux

connect

您需要分派 loginSuccesss 操作，而不是直接调用它。所以，你需要做一些像 this.props.dispatch(loginSuccess())

HTH

Redux Dispatch 在 Action Creator 中不起作用

Redux Dispatch Not Working in Action Creator

reactjs

react-native

redux

react-redux