如何在React项目中优雅的使用对话框

const MySalesOrders: React.FC = () => {
  const [visible, setVisible] = React.useState(false);
  ...
  return (
  	<>
    	<A modalVisible={setVisible}/>      
			<B modalVisible={setVisible}/>
    	{
        visible ? (
          <C
            ...
          />
        ) : null
      }
    </>
  );
}

const A: React.FC = (props) => {
  ...
  return (
  	<>
    	<Button 
        onClick={() => {
            props.modalVisible(...)
        }} 
      />
    </>
  );
}

const B: React.FC = (props) => {
  ...
  return (
  	<>
    	<Button 
        onClick={() => {
            props.modalVisible(...)
        }} 
      />
    </>
  );
}

export default (state = {
  hiding: {}
}, action: AnyAction) => {
  switch (action.type) {
    case CONSTANTS.modalShow:
      return {
        ...state,
        [action.payload.modalId]: action.payload.args || true,
        hiding: {
          ...state.hiding,
          [action.payload.modalId]: false,
        },
      };
    case CONSTANTS.modalHide:
      return action.payload.force
        ? {
          ...state,
          [action.payload.modalId]: false,
          hiding: { [action.payload.modalId]: false },
        }
        : { ...state, hiding: { [action.payload.modalId]: true } };
    default:
      return state;
  }
};

export function showModal(modalId: string, args: any) {
  return {
    type: CONSTANTS.modalShow,
    payload: {
      modalId,
      args,
    },
  };
}

export function hideModal(modalId: string, force: any) {
  return {
    type: CONSTANTS.modalHide,
    payload: {
      modalId,
      force,
    },
  };
}

export const useCommonModal = (modalId: string) => {
  const dispatch = useDispatch();

  const show = React.useCallback(
    (args?: any) => new Promise((resolve) => {
      commonmModalCallbacks[modalId] = resolve;
      dispatch(showModal(modalId, { ...args }));
    }),
    [dispatch, modalId],
  );

  const resolve = React.useCallback(
    (args?: any) => {
      if (commonmModalCallbacks[modalId]) {
        commonmModalCallbacks[modalId]({ ...args });
        delete commonmModalCallbacks[modalId];
      }
    },
    [modalId],
  );

  const hide = React.useCallback(
    (force?: any) => {
      dispatch(hideModal(modalId, force));
      delete commonmModalCallbacks[modalId];
    },
    [dispatch, modalId],
  );

  const args = useSelector((s: any) => s?.modalReducer?.[modalId]);
  const hiding = useSelector((s: any) => s?.modalReducer?.hiding?.[modalId]);

  return React.useMemo(
    () => ({ args, hiding, visible: !!args, show, hide, resolve }),
    [args, hide, show, resolve, hiding],
  );
};

export const createCommonModal = (modalId: string, Comp: any) => (props: any) => {
  const { visible, args } = useCommonModal(modalId);
  if (!visible) return null;
  return (
    <Comp
      {...args}
      {...props}
    />
  );
};

const show = React.useCallback(
    (args?: any) => new Promise((resolve) => {
      commonmModalCallbacks[modalId] = resolve;
      //  args 中携带上 callback
      dispatch(showModal(modalId, { ...args }));
    }),
    [dispatch, modalId],
  );

// 调用
const modal = useCommonModal('modal-id');
modal.show({
  callback() {}
});

// 对话框解析参数
const modalReducer = useSelector((state: any) => state.modalReducer);
const { callback } = modalReducer?.['modal-id'];

//对话框触发
callback();

  const resolve = React.useCallback(
    (args?: any) => {
      if (commonmModalCallbacks[modalId]) {
        commonmModalCallbacks[modalId]({ ...args });
        delete commonmModalCallbacks[modalId];
      }
    },
    [modalId],
  );

// 调用
const modal = useCommonModal('modal-id');
modal.show(args).then(result => {});

// 对话框触发
const modal = useCommonModal('modal-id');
modal.resolve({ ... });