可观察对象如何与模态框协作

可观察对象如何与模态框协作

以组件PriceAlertModal为例，观察Modal与可观察对象的结合使用

src\common\reactModules\priceAlertModal\components\priceAlertModal.tsx

组件期待接受一个可观察对象priceAlertSubject$属性

const PriceAlertModal = (props: ModalProps) => {
    const { ..., priceAlertSubject$, ... } = props;

在钩子中调用可观察对象的.subscribe()来定义"如何响应流事件"

const [showModal, toggleModal] = useState(false); // 还可以有众多的state
useEffect(() => { 
  priceAlertSubject$.subscribe(({props})=>{ 
      /* cosnt {propA} = props; setStateA(propA) */
  });
}, []);

此处还用了一个公用组件：

import Dialog from '@ctrip/ibu-flight-pc-component/lib/reactUI/dialog'; /* use client */

return (
        <>
            <If condition={showModal}>
                <Dialog ...propsDialog>
                	<ModalContent ...propsModal/>
                </Dialog>
            </If>
        </>
    );

希望使用此组件时，在外层创建可观察对象priceAlertSubject$，这个对象可以被多个具体组件接受以及发送事件，也就是说这个模态框也是一种单例

const priceAlertSubject$ = useMemo(() => new Subject<any>(), []);

useEffect(() => {
    return () => {
        priceAlertSubject$.unsubscribe();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

在具体组件内部，调用可观察对象的next()产生流事件，使PriceAlertModal感知到内容变化

import { PriceAlertModal,...} from '@reactModules/priceAlertModal';

const openEditModal = () => {
    someData &&
        priceAlertSubject$.next({
            ...
            operateType: EOperateType.Edit,
            basicData: someData,
            ...
        });
};

const openSubscribeModal = () => {
    someData &&
        priceAlertSubject$.next({
            ...
            operateType: EOperateType.Subscribe,
            basicData: someData,
            ...
        });
};