Reactjs Redux未到达操作

这是login.js文件

import {Form, Icon, Input, Button} from 'antd';
import React from 'react'
import axios from 'axios'
import {connect} from 'react-redux'
import {loading} from '../actions/authenticationActions'

class Login extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        return this.props.onloading;
    };

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className={'ant-col-12 ant-col-offset-6'} style={{ display: 'inline-flex', justifyContent: 'center', alignItems: 'center', height: "100vh"}}>
                <Form onSubmit={this.handleSubmit} className="login-form" style={{width: "300px"}}>
                    <Form.Item>
                        {getFieldDecorator('userName', {
                            rules: [{ required: true, message: 'Please input your username!' }],
                        })(
                            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: 'Please input your Password!' }],
                        })(
                            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button" style={{width: "100%"}}>
                            Log in
                        </Button>
                        </Form.Item>
                </Form>
            </div>

        );
    }
}

const WrappedLogin = Form.create({ name: 'normal_login' })(Login);

const mapActionsToProps = {
    onloading: loading
};

export default connect(null, mapActionsToProps)(WrappedLogin);

此外，这是Reducers文件：

import {LOADING} from "../utils/ActionTypes";


const initialState= [{
    Authorized: false,
    user: null,
    token: null,
    loading: false
}];


export default function authenticationReducer(state = initialState, action) {
    switch (action.type) {
        case LOADING:
            return console.log("loading....");

        default:
            return state;
    }
}

最后是存储文件：

import {combineReducers, createStore, compose} from "redux";
import authenticationReducer from "../reducers/authenticationReducer";
const store = createStore(authenticationReducer, compose(
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));

export default store;

---

您好，我刚刚开始学习redux，我遇到了这个问题，您可以在actions文件中看到一条控制台消息，问题是我没有达到这一点，我不知道为什么需要任何帮助…

您没有调用您的action

this.props.onload

代码中的任何地方。在方法中调用它将分派相应的操作

handleSubmit = (e) => {
    e.preventDefault();
    this.props.onloading()
};

---

我不熟悉antd表单组件，但您需要使用dispatch you action（加载）。dispatch是react redux提供的一个特殊函数，当您使用connect function.omg包装组件时，它被注入到组件中。我没有注意到我调用的是

this.props.onload

而不是

this.props.onload（）

handleSubmit = (e) => {
    e.preventDefault();
    this.props.onloading()
};