Comment implémenter la connexion dans React ? Explication détaillée du module de connexion React

Cet article présente principalement le module de connexion de react et présente en détail la situation de connexion de React. Jetons maintenant un œil au texte de l'article

Connexion basée sur React

Le premier type de connexion

• Soumission de la page de connexion login handleSubmit(), medium Effectuer des requêtes API directement. Après une demande de connexion réussie, accédez à history.push(nextPathname, null);

• Pour la méthode de mise en œuvre, veuillez vous référer à http://blog.csdn.net/qq_27384769/article/ détails/78775835

Le deuxième type de connexion

• Une fois que la page de connexion a soumis la connexion handleSubmit(), un la demande est initiée via saga.

• Une fois la demande réussie, lancez une action et appelez le réducteur. Rechargez la page de connexion.

• Dans le composant de cycle de vie de la page de connexion, WillReceiveProps vérifie les informations de connexion et demande le saut.

Ce qui suit est une explication de la deuxième méthode de connexion

réducteur Structure des données dans

auth:{
	type: "COMPLOGIN/RECEIVE_DATA", 
	isFetching: false, 
	data: {uid: 1, permissions: Array(5), role: "系统管理员", roleType: 1, userName: "系统管理员"}
}

Code

login.jsx

• composantWillReceiveProps s'ajuste après une connexion réussie

• handleSubmit gère la connexion de soumission

import React from 'react';import {Form, Icon, Input, Button, Checkbox} from 'antd';import {connect} from 'react-redux';import {bindActionCreators} from 'redux';import {findData, receiveData} from '../actions';import {selectVisibleMenuResourceTreeTable} from '../selector';const FormItem = Form.Item;class Login extends React.Component {    componentWillMount() {        const {receiveData} = this.props;        receiveData(null, 'auth');
    }    componentWillReceiveProps(nextProps) {        const {auth: nextAuth = {}} = nextProps;        if (nextAuth.data && nextAuth.data.uid) {   // 判断是否登陆
            localStorage.setItem('user', JSON.stringify(nextAuth.data));            this.props.history.push('/', null);
        }
    }    handleSubmit = (e) => {        e.preventDefault();        this.props.form.validateFields((err, values) => {            if (!err) {                console.log('Received values of form: ', values);                const {findData} = this.props;                if (values.userName === 'admin' && values.password === 'admin') findData({
                    funcName: 'admin',
                    stateName: 'auth'
                });                if (values.userName === 'guest' && values.password === 'guest') findData({
                    funcName: 'guest',
                    stateName: 'auth'
                });
            }
        });
    };    gitHub = () => {        console.log("gitHub");
    };    render() {        const {getFieldDecorator} = this.props.form;        return (            434e1358c9378ac3fd33b911e780149e
                b2394c444f081e0017d1642dfc84f1f8
                    c92ea6d2badfaeb250216ed853bbdbb2
                        45a2772a6b6107b401db3c9b82c049c2React Admin54bdf357c58b8a65c66d7c19c8e4d114
                    94b3e26ee717c64999d7867364b1b4a3
                    184b34f4f105d6516fe712766a9e325a
                        b991a1338e3038b10035bb6940ac6193
                            {getFieldDecorator('userName', {
                                rules: [{required: true, message: '请输入用户名!'}],
                            })(                                501c34e1e18ea140ee629fc657f756aa}
                                       placeholder="管理员输入admin, 游客输入guest"/>
                            )}                        ef807bb895304b2f6a1f66b2641ea569
                        b991a1338e3038b10035bb6940ac6193
                            {getFieldDecorator('password', {
                                rules: [{required: true, message: '请输入密码!'}],
                            })(                                a702425267d3239dc21f20d5c644eaaf} type="password"
                                       placeholder="管理员输入admin, 游客输入guest"/>
                            )}                        ef807bb895304b2f6a1f66b2641ea569
                        b991a1338e3038b10035bb6940ac6193
                            {getFieldDecorator('remember', {
                                valuePropName: 'checked',
                                initialValue: true,
                            })(                                69393f9a46ae20607b893bed10218172记住我fc4d79e34ad347b99c684660ce4ccba3
                            )}                            cca3a973c05f7502e090180a02c32514忘记密码5db79b134e9f6b82c0b36e0489ee08ed
                            95b3f5ad236f0c0143abd915a9cd3964
                                登录                            a1cb88e6789f399807801ea3799938af
                            或 6170e8999ab19ec641e0422470b16d5c现在就去注册!5db79b134e9f6b82c0b36e0489ee08ed
                            e388a4556c0f65e1904146cc1a846bee
                                7baa8ae66257a5658535c02e56eb333a(第三方登录)                            94b3e26ee717c64999d7867364b1b4a3
                        ef807bb895304b2f6a1f66b2641ea569
                    70a2c5d410e290aa58cb7e59d41eaf55
                94b3e26ee717c64999d7867364b1b4a3
            94b3e26ee717c64999d7867364b1b4a3
        );
    }
}const mapStateToPorps = state => {    return {
        auth: selectVisibleMenuResourceTreeTable(state)
    }
};const mapDispatchToProps = dispatch => ({
    findData: bindActionCreators(findData, dispatch),
    receiveData: bindActionCreators(receiveData, dispatch)
});export default Form.create()(connect(mapStateToPorps, mapDispatchToProps)(Login));

actions

• findData Cliquez sur le bouton pour lancer une requête

• requestData avant d'appeler l'API

• requestData appelle l'API pour obtenir les données

import * as type from './actionTypes';export const findData = (data) => {    let {funcName, stateName} = data;    return {
        type: type.COMP_LOGIN_FIND_DATA,
        funcName,
        stateName
    }
}export const requestData = category => ({
    type: type.COMP_LOGIN_REQUEST_DATA,
    category
});export const receiveData = (data, category) => ({
    type: type.COMP_LOGIN_RECEIVE_DATA,
    data,
    category
});

actionTypes

export const COMP_LOGIN_FIND_DATA = 'COMPLOGIN/FIND_DATA';export const COMP_LOGIN_REQUEST_DATA = 'COMPLOGIN/REQUEST_DATA';export const COMP_LOGIN_RECEIVE_DATA = 'COMPLOGIN/RECEIVE_DATA';

index

import React from 'react';import Bundle from '../../../bundle/views/bundle';import * as actions from './actions';const view = (props) => {    return (        42c9814113858c7668de4a776bc31ec5 import("./lazy")}>
            {(View) => {                return 2fb732b7199e4f5e49a9d32783267755
            }}        2075647a73e9b735dd611345836fffdd
    );
};export {actions, view};

paresseux Chargement asynchrone

• Charger la structure de données sagasreducerview

• correspondante dans le réducteur selon le composant : [compLoginName] : compLoginReducer

import compLoginSagas from './sagas';import compLoginReducer from './reducer';import view from './views/Login';import {UumsCompsReducerNames} from '../../constants';const compLoginName = UumsCompsReducerNames.compLogin;const reducer = {
    [compLoginName]: compLoginReducer
};const sagas = {
    [compLoginName]: compLoginSagas
};export {sagas, reducer, view};

réducteur

• Fonction pure

export default (state = {}, action) => {    const {type} = action;    switch (type) {        case types.COMP_LOGIN_REQUEST_DATA: {            return {                ...state, type: type, isFetching: true
            }
        }        case types.COMP_LOGIN_RECEIVE_DATA:            return {...state, type: type,isFetching: false, data: action.data};        default:            return {...state};
    }
}

sagas

Appels asynchrones

import * as http from '../axios/index';import {call, put, takeLatest} from 'redux-saga/effects';import {requestData, receiveData} from './actions';import {COMP_LOGIN_FIND_DATA} from './actionTypes';export const fetchData = ({funcName, params}) => {    return http[funcName](params).then(res => {        return res;
    });
};function* fetchLoginInfo(data) {    try {        let {stateName} = data;        yield put(requestData());        const result = yield call(fetchData, data);        yield put(receiveData(result, stateName));
    } catch (e) {        console.log(e);
    }
}function* sagas() {    yield takeLatest(COMP_LOGIN_FIND_DATA, fetchLoginInfo);
}export default sagas;

sélecteur

Sélecteur de composants mémoire

import {createSelector} from 'reselect';const getCompLoginData = (state) => state.compLoginData;export const 
selectVisibleMenuResourceTreeTable = createSelector(
    [getCompLoginData],
    (compLoginData) => compLoginData
);

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site PHP chinois Apprenez dans la colonne Manuel d'utilisation de React ). Si vous avez des questions, vous pouvez laisser un message ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!