Question

这是login.js文件

const obj = Object.freeze({ a: 1, b: 2 } as const); // { radonly a: 1, readonly b: 2 }

这是Actions文件：

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

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

嗨，我刚刚开始学习redux，我遇到了这个问题，正如您在action文件中看到的那样，控制台消息显示问题是我没有达到目标，我也不知道为什么会有帮助感谢...

Answer 1

您不会在代码中的任何地方调用操作this.props.onloading。在方法中调用它会调度相应的操作。

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

Redux无法达到目的

1 个答案: