React/Redux 应用操作未正确发送

Question

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

constants/AuthActionTypes.js:

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

actions/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 函数。

components/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 窗格不显示任何操作类型，我在控制台中收到以下警告：

Warning: Failed propType: Invalid prop action of type function supplied to LogMonitorEntry, expected object. Check the render method of LogMonitor.

我在这里做错了什么？我错过了什么？我主要查看了 https://github.com/rackt/redux/tree/master/examples/real-world and https://github.com/yildizberkay/redux-example 上的示例，但我看不出我的做法有何不同导致我自己的应用程序中断。

Answer 1

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

Answer 2

你可以做 w/o thunk。变化

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

到

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

当然，你必须导入这两个methods/action-creators。

React/Redux 应用操作未正确发送

React/Redux app actions not being dispatched properly

javascript

reactjs

redux