Redux Dispatch 在 Action Creator 中不起作用答案

【问题标题】：Redux Dispatch Not Working in Action CreatorRedux Dispatch 在 Action Creator 中不起作用
【发布时间】：2016-12-10 01:07:54
【问题描述】：

我有以下动作创建者，由于某种原因，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;

【问题讨论】：

由于您从动作创建者返回一个函数，我假设您正在使用 redux-thunk 中间件 for redux
@VarunGupta 我相信我是，但我如何验证我正在使用它？
当您在要应用到商店的中间件列表中创建商店时，您必须添加它。查看此页面redux.js.org/docs/api/applyMiddleware.html
@VarunGupta 参见上面的编辑，据我所知，我这样做是正确的。
我认为它看起来是正确的。你怎么知道 dispatch 里面的代码没有被执行。也许facebook.getUser 没有完成。您可以在回调中放置一个 console.log 以确认它已完成。此外，您正在检查if(error)，但未定义错误。所以，它永远不会进去。

标签： reactjs react-native redux react-redux

【解决方案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
})

【讨论】：

【解决方案2】：

FacebookLogin 组件中有几个错误。

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

HTH

【讨论】：