react+antd+less_x86(redux)

redux

　　store.js

import { createStore } from 'redux';
import reducer from './reducer.js';

export default createStore(reducer);

reducer.js

import { GET_ACCOUNT } from './action_types.js';
//用户信息
let initName = '';
//解决页面刷新，redux丢失数据问题
let initNameSession = sessionStorage.getItem('userName');
if (initNameSession) initName = initNameSession;
export default function getAccount (preState = initName, action) {
    let { type, data } = action;
    switch (type) {
        case GET_ACCOUNT:
            let newPreState = data;
            return newPreState;
        default:
            return preState;    
    };
};

action_types.js

export const GET_ACCOUNT = 'getAccount';

action_creator.js

import { GET_ACCOUNT } from './action_types.js';
export const getAccount = value => ( { type: GET_ACCOUNT, data: value } );

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App.js';
import './less/index.less';
import './js/rem.js';
import store from './redux/store.js';

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

//redux重新渲染视图
store.subscribe( () => {
    ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.getElementById('root'));
} );

import React, { Component } from 'react';
import './Login.less';
import X86Input from '../../components/X86_Input/X86_Input.jsx';
import X86Button from '../../components/X86_Button/X86_Button.jsx';
import { UserOutlined, UnlockOutlined } from '@ant-design/icons';
import logo from '../../images/logo.png';
import { loginKP, userKP } from '../../request/api';
import { message, Input } from 'antd';
import store from '../../redux/store.js';
import { getAccount } from '../../redux/action_creator.js';
const { Password } = Input;

export default class Login extends Component {
    inputSize = 'middle';
    userPlaceholder = '请输入用户名';
    passwordPlaceholder = '请输入密码';
    userPreFix = <UserOutlined />;
    passwordPreFix = <UnlockOutlined />;
    applyButtonType = 'primary';
    applyButtonLogin = '登录';
    blockBtn = true;
    state = {
        userName: '',
        getPassWordValue: ''
    };
    //用户名
    getUserNameValue = (inpVal) => {
        this.setState({
            userName: inpVal
        });
    };
    //密码
    getPassWordValue = (e) => {
        this.setState({
            getPassWordValue: e.target.value
        });
    };
    //登录
    getBtnLogin = async () => {
        let { userName, getPassWordValue } = this.state;
        let params = { userName, password: getPassWordValue };
        let loginRes = await loginKP(params);
        let { code, msg, data } = loginRes;
        if (code === 0) {
            //将token存储到sessionStorage中
            sessionStorage.setItem('token', data);
            //提示
            message.success('登录成功');
            //调用用户信息接口
            let userRes = await userKP();
            console.log(userRes);
            if (userRes.code === 0) {
                let { data } = userRes;
                let { userName } = data;
                //将数据存储到sessionStorage
                sessionStorage.setItem('userName', userName);
                //向redux的reducer分发任务
                store.dispatch(getAccount(userName));
                //跳转操作
                this.props.history.push({
                    pathname: '/home/apply'
                });
            };
        } else if (code === 9) {
            //提示
            message.error(msg);
        };
    };
    render () {
        return (
            <div>
                <div className="LoginStyle">
                    <div className="LoginStyleContent">
                        <div className="LoginStyleContentTitle">
                            {/* logo */}
                            <div className="item">
                                <img width={60} src={logo} alt="" />
                            </div>
                            {/* 名称 */}
                            <div className="item">
                                快盘科技
                            </div>
                        </div>
                        <div className="LoginStyleContentItem">
                            {/* 用户名 */}
                            <X86Input inputSize={this.inputSize} inpPlaceholder={this.userPlaceholder} inpPrefix={this.userPreFix} getInputValue={this.getUserNameValue}></X86Input>
                        </div>
                        <div className="LoginStyleContentItem">
                            {/* 密码 */}
                            <Password size={this.inputSize} placeholder={this.passwordPlaceholder} prefix={this.passwordPreFix} onChange={this.getPassWordValue}></Password>
                        </div>
                        <div>
                            <X86Button blockBtn={this.blockBtn} applyButtonType={this.applyButtonType} applyButtonText={this.applyButtonLogin} getBtnValue={this.getBtnLogin}></X86Button>
                        </div>
                    </div>
                </div>
            </div>
        );
    };
};

X86_Breadcrumb.jsx

import React, { Component } from 'react';
import './X86_Breadcrumb.less';
import { withRouter } from 'react-router-dom';
import menuList from '../../router/router.js';
import { Popover } from 'antd';
import X86Button from '../X86_Button/X86_Button.jsx';
import store from '../../redux/store.js';

class X86_Breadcrumb extends Component {
    applyButtonExit = '退出登录';
    render () {
        // 响应面包屑
        let BreadcrumbName;
        let BreadcrumbNameList = [];
        BreadcrumbNameList = menuList.map( item => {
            if (item.path === this.props.location.pathname) return item.title;
        } );
        BreadcrumbNameList.forEach( item => {
            if (item === '账号管理') item = '账号信息';
            if (item !== undefined) BreadcrumbName = item;
        } );
        //气泡卡片内容
        let content = (
            <div>
                <X86Button applyButtonText={this.applyButtonExit}></X86Button>
            </div>
        );
        //redux数据
        let userName = store.getState();
        return (
            <div className="X86_BreadcrumbStyle">
                {/* 账号信息 */}
                <div className="X86_BreadcrumbAccount">
                    <Popover content={content} trigger="hover">
                        <span>{userName}</span>
                    </Popover>
                </div>
                {/* 面包屑 */}
                <div>
                    { BreadcrumbName }
                </div>
            </div>
        );
    };
};

export default withRouter(X86_Breadcrumb);