Redux not reaching the action - reactjs

Question

Here is the login.js file
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);
and here is the Actions file:
import {LOADING} from "../utils/ActionTypes";
export function loading() {
console.log("action received");
return {
type: LOADING
}
}
also here is the Reducers file:
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;
}
}
and finally the Store file:
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;
hi, I have just started learning redux and I have this issue where as you can see in the actions file there is a console message the problem is I'm not reaching that point and I don't know why any help is appreciated...

Answer 1

You're not calling your action this.props.onloading anywhere in your code. Calling it in the method will dispatch the corresponding action.
handleSubmit = (e) => {
e.preventDefault();
this.props.onloading()
};