Question

我正在尝试使用Redux设置我的第一个React应用程序，但我目前在调度操作时遇到了一些问题。到目前为止，我的行为有以下文件：

常量/ AuthActionTypes.js：

export const AUTH_PENDING = 'AUTH_PENDING';
export const AUTH_SUCCESS = 'AUTH_SUCCESS';
export const AUTH_FAIL = 'AUTH_FAIL';

操作/ AuthActions.js：

import * as AuthActionTypes from '../constants/AuthActionTypes';

function authPending() {
  return { type: AuthActionTypes.AUTH_PENDING };
}

function authSuccess(response) {
  return { type: AuthActionTypes.AUTH_SUCCESS };
}

export function login(username, password) {
  return dispatch => {
    dispatch(authPending());
    // nothing really happens yet
    dispatch(authSuccess());
  };
}

我还有一个包含HTML表单的登录组件，以及在提交表单时调用的login函数。

组件/ Login.js

...

login (e) {
  e.preventDefault();

  var username = ReactDOM.findDOMNode(this.refs.username).value;
  var password = ReactDOM.findDOMNode(this.refs.password).value;

  this.props.dispatch(AuthActions.login(username, password));
}

...

触发了该功能，但是...... 某事是不对的。我使用redux-devtools，它只会调度一个操作 - 当然，它应该从authPending和authSuccess调度操作？此外，devtools窗格不显示任何操作类型，我在控制台中收到以下警告：

警告：propType失败：action类型的道具function无效提供给LogMonitorEntry，预计object。检查渲染 LogMonitor的方法。

我在这里做错了什么？我错过了什么？我主要查看了https://github.com/rackt/redux/tree/master/examples/real-world和https://github.com/yildizberkay/redux-example上的示例，我无法看到我正在采取的不同方式让我自己的应用中断。

Answer 1

......几分钟后，我偶然发现了答案：我没有将redux-thunk中间件应用到我的商店。应用它，一切都按预期工作。

Answer 2

你可以做没有thunk。变化

this.props.dispatch(AuthActions.login(username, password));

到

this.props.dispatch(AuthActions.authPending());
this.props.dispatch(AuthActions.authSuccess());

当然，你必须导入这两个方法/动作创建者。

React / Redux应用程序操作未正确分派

2 个答案: