Как обновить реквизит общего компонента в реагировать на родной?

Question

Я работаю над собственным встроенным приложением, в котором я перемещаю некоторые компоненты в общие компоненты, такие как drop-downdown-list, hyperlink. Эти общие компоненты используются другими компонентами, которые отображают экран (или страницу) в мобильном приложении.

Ранее я включил окно оповещения, которое отображается во всех 4 компонентах отдельно. Теперь я делаю окно оповещения (только реагирующее собственное оповещение) в качестве общего компонента, где я пытаюсь отобразить его только тогда, когда isAlertVisible prop имеет значение true и я обновляю это (isAlertVisible) в редуксе отдельно для каждого компонента.

Например: если у меня есть 4 экрана (отображаются с использованием 4 разных компонентов), и мне нужно отобразить окно оповещения на каждом из этих экранов, я объявляю prop isAlertVisible в каждом из этих 4 компонентов и обновляю его отправка действия toggleAlertVisible () из всех компонентов отдельно и переключение isAlertVisible (true или false) с использованием redux. Моя проблема заключается в том, что если я сделаю оповещение как общий компонент, то как узнать, из какого Обновлен компонент isAlertVisible.

Я попробовал это, передав isAlertVisible в качестве реквизита от каждого из 4 компонентов, и реквизит isAlertVisible в каждом из компонентов обновлен (то есть переключение с true на false и false на true), но реквизит в совместно используемом компоненте, т.е. в компоненте Alert, не обновляется. (показывает неопределенное)

Примечание: я передаю заголовок оповещения, сообщение, имя кнопки в качестве реквизита от каждого из 4 компонентов, и я могу видеть эти изменения во время отладки в компоненте оповещения, но реквизит isAlertVisible не получается обновлено (то есть не переключается) и отображается как неопределенное

Также поправьте меня, если я делаю это неправильно.

Это код в alertbox.tsx

import * as React from "react";
import { connect } from "react-redux";
import {State} from "../../../../store/reducer";
import { AlertBox, AlertBoxContainerProps } from "./alertbox";

export interface AlertBoxContainerState {
    isAlertVisible?: boolean;
}

export class AlertBoxContainer extends React.Component<AlertBoxContainerProps, AlertBoxContainerState> {


    render() {
        return (
            <AlertBox
                isAlertVisible={this.props.isAlertVisible} // getting undefined here
                alertHeader={this.props.alertHeader}
                alertMessage={this.props.alertMessage}
                alertLeftButtonText={this.props.alertLeftButtonText}
                alertRightButtonText={this.props.alertRightButtonText}
                alertLeftButton={this.props.alertLeftButton}
                alertRightButton={this.props.alertRightButton}
            />
        );
    }
}


export default connect<any, AlertBoxContainerProps, AlertBoxContainerProps>(
    mapStateToProps,
    null
)(AlertBoxContainer);

и этот код в alertbox-container.tsx

import * as React from "react";
import { Alert, View } from "react-native";

export interface AlertBoxContainerProps {
    isAlertVisible?: boolean;
    alertLeftButton?: () => any;
    alertRightButton?: () => any;
    alertHeader?: string;
    alertMessage?: string;
    alertLeftButtonText?: string;
    alertRightButtonText?: string;
}

export const AlertBox = (props: AlertBoxContainerProps) => {
    return (
        <View>
            {}
            {props.isAlertVisible
                ? Alert.alert(props.alertHeader, props.alertMessage, [
                      { text: props.alertLeftButtonText, onPress: () => props.alertLeftButton() },
                      { text: props.alertRightButtonText, onPress: () => props.alertRightButton() }
                  ])
                : null}
        </View>
    );
};

Я ожидаю, что prop isAlertVisible в компоненте Alert будет переключаться в соответствии с состоянием isAlertVisible в каждом из компонентов