React / Redux应用程序操作未正确调度

Question

I'm trying to set up my first React app using Redux, but I'm currently having some issues with dispatching actions. I have the following files for my actions so far:

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

I've also got a login component containing an HTML form, and a login function that gets called when the form is submitted.

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

...

The function is triggered, but... something isn't right. I use redux-devtools , and it only dispatches a single action - surely, it should dispatch the actions from both authPending and authSuccess ? In addition, the devtools pane doesn't display any action type, and I get the following warning in the console:

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

What am I doing wrong here? What have I missed? I've primarily looked at the examples at https://github.com/rackt/redux/tree/master/examples/real-world and https://github.com/yildizberkay/redux-example , and I can't see what I'm doing differently that makes my own app break.

Answer 1

... and a couple of minutes later, I've stumbled across the answer: I didn't have the redux-thunk middleware applied to my store. Applied that, and everything works as expected.

Answer 2

You can do w/o thunk. change

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

to

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

Ofcourse, you have to import those two methods/action-creators.