React / Redux应用程序操作未正确分派-Java 学习之路

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

警告：propType失败：提供给LogMonitorEntry，预期对象的类型函数的无效prop动作 . 检查LogMonitor的render方法 .

我在这做错了什么？我错过了什么？我主要看了https://github.com/rackt/redux/tree/master/examples/real-world和https://github.com/yildizberkay/redux-example的例子，我可以't see what I' m做不同的事情让我自己的应用程序中断 .

2 回答

1

......几分钟后，我 redux-thunk 中间件应用于我的商店 . 应用它，一切都按预期工作 .

回复于 2024-04-28T12:07:10+08:00

你可以做没有thunk . 更改

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

至

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

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

回复于 2024-04-28T12:07:10+08:00

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

2 回答

相关问题