Redux не достигает действия - PullRequest
Новая
       2

Redux не достигает действия

1 голос
/ 09 марта 2019

Вот файл 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);

и вот файл действий: 

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

export function loading() {
    console.log("action received");
    return {
            type: LOADING
        }
    }

также есть файл Редукторов: 

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

и, наконец, файл Store: 

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;

Привет, я только начал изучать лексему, и у меня есть эта проблема, где, как вы можете видеть в файле действий, есть консольное сообщение, проблема в том, что я не достигаю этой точки, и я не знаю, почему какая-либо помощь цениться ...

1 Ответ

1 голос
/ 09 марта 2019

Вы не называете свое действие this.props.onloading нигде в своем коде.Вызов этого метода вызовет соответствующее действие. 

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