У меня проблемы с прорезыванием зубов с помощью React + Redux для поддержки аутентификации страницы private / publi c

Question

Я некоторое время читал о React, и я понимаю некоторые концепции, я также довольно хорошо знаком с SAP UI5 и Knockout js. Я запустил новый шаблон React + Redux в VS2019, в этом примере есть прогноз погоды и примеры счетчиков.

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

Мой компонент входа в систему до сих пор выглядит следующим образом:

import * as React from "react";
import { connect } from "react-redux";
import { RouteComponentProps } from 'react-router';
import { ApplicationState } from '../store';
import * as AuthSession from '../store/AuthSession';

type AuthProps =
    AuthSession.AuthState &
    typeof AuthSession.actionCreators &
    RouteComponentProps<{}>;


class Login extends React.PureComponent<AuthProps> {
    public render() {
        return (
            <React.Fragment>
                <h1>Login</h1>

                <p aria-live="polite">Current IsAuthenticated= <strong>{String(this.props.IsAuthenticated)}</strong></p>
                <p aria-live="polite">Current uuid= <strong>{this.props.uuid}</strong></p>

                <button type="button"
                    className="btn btn-primary btn-lg"
                    onClick={() => { this.props.auth(); }}>
                    Auth
                </button>

            </React.Fragment>
        );
    }
};

export default connect(
    (state: ApplicationState) => state.auth,
    AuthSession.actionCreators
)(Login);

Я также следил за блогом, связанным с созданием компонентов LoggedInRoute и LoggedOutRoute, чтобы привлечь внимание к аспектам сайта. Блог использовал функции стрелок вместо классов, и я не мог обдумать это, поэтому я отправился в собственное путешествие. У меня действительно возникают проблемы с передачей моего состояния из хранилища избыточности в дополнение к атрибутам (меткам) моего тега компонента. Пока что мои усилия выглядят так:

import * as React from "react";
import { connect } from "react-redux";
import { Route } from "react-router-dom";
import { RouteComponentProps } from 'react-router';
import { ApplicationState } from '../store';
import * as AuthSession from '../store/AuthSession';

type ParamProps = {
    exact?: boolean;
    path: string;
    component: React.ComponentType<any>;
    otherProps: any
};

type ComponentProps =
    AuthSession.AuthState &
    typeof AuthSession.actionCreators &
    RouteComponentProps<{}> &
    ParamProps;


class LoggedInRoute extends React.PureComponent<ComponentProps> {
    public render() {
        if (this.props.IsAuthenticated === true) {
            return (
                <React.Fragment>
                    <p aria-live="polite">Current IsAuthenticated= <strong>{String(this.props.IsAuthenticated)}</strong></p>
                    <p aria-live="polite">Current uuid= <strong>{this.props.uuid}</strong></p>

                    <Route
                        render={otherProps => (
                            <>
                                <React.Component {...otherProps} />
                            </>
                        )}
                    />
                </React.Fragment>
            );
        } else {
            return null;
        }
    }
};

export default connect(
    (state: ApplicationState, ownProps: ParamProps) => {
        return { ...state.auth, ...ownProps }
    },
    AuthSession.actionCreators,
)(LoggedInRoute);

Это дает мне ошибку:

Ошибка TypeScript в /src/App.tsx(21,10): Type '{ путь: строка; компонент: ConnectedComponentClass >; } 'отсутствуют следующие свойства типа «Readonly & ParamProps>»: местоположение, история, соответствие, uuid и еще 2. TS2740 19 | 20 | > 21 | | ^ 22 | 23 | );

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

Как я могу указать соединение, чтобы я мог передавать избыточное состояние, а также выполнить трюк, где вы можете пройти через указанные c именованные свойства, а также остальные свойства? - т.е. {stateprops, component, ... otherProps}

Длинный вопрос, но я уверен, что это просто для большинства программистов React.

Спасибо

Answer 1

Я посмотрел на это немного больше, и он заработал:

import * as React from "react";
import { connect } from "react-redux";
import { Route } from "react-router-dom";
import { RouteComponentProps } from 'react-router';
import { ApplicationState } from '../store';
import * as AuthSession from '../store/AuthSession';

type ParamProps = {
    exact?: boolean;
    path: string;
    component: React.ComponentType<any>;
    otherProps?: any
};

type ComponentProps =
    AuthSession.AuthState &
    typeof AuthSession.actionCreators &
    RouteComponentProps<{}> &
    ParamProps;


class LoggedInRoute extends React.PureComponent<ComponentProps> {
    public render() {
        var props = this.props;
        var Component = props.component;
        if (this.props.IsAuthenticated === true) {
            return (
                <React.Fragment>
                    <Route path={props.path}
                        render={otherProps => (
                            <>
                                <Component component={props.component} {...otherProps} />
                            </>
                        )}
                    />
                </React.Fragment>
            );
        } else {
            return (false);
;
        }
    }
};

export default connect(
    (state: ApplicationState, ownProps: any) => {
        const { component, path, ...rest } = ownProps;
        let op = {} as ParamProps;
        op.component = component;
        op.path = path;
        op.otherProps = rest;
        let st = { ...state.auth, ...op } as ComponentProps;
        return st;
        },
    AuthSession.actionCreators,
)(LoggedInRoute);

Требовались два изменения:

1) Да, вы можете составить свои реквизиты в сопоставлении состояния соединения , Вам нужно только вернуть указанные c поля, которые вы указали в своем типе (как и ожидалось). Однако добавленное свойство «ownProps» не входит с указанным вами типом, вы должны создать правильный тип.

2) Когда я прошел через это, кажется, что React не знает, как отрисовывать компонент, который был передан. Оказывается, что JSX / TSX отобразит компонент, содержащийся в переменной, если эта переменная начинается с заглавной буквы. Поэтому я назначил свое свойство component в переменную Component. Мне очень нравится эта функция, когда я ее понимаю.

:)