如何在Redux中显示执行异步操作的模式对话框?

2020/10/10 17:21 · javascript ·  · 0评论

我正在构建一个在某些情况下需要显示确认对话框的应用。

假设我要删除一些东西,然后我将分派一个动作,deleteSomething(id)以便某些化简器会捕获该事件并填充对话框化简器以显示它。

我的疑问是当该对话框提交时。

  • 该组件如何根据分派的第一个动作分派适当的动作?
  • 动作创建者应该处理这种逻辑吗?
  • 我们可以在减速器中添加动作吗?

编辑:

使其更清楚:

deleteThingA(id) => show dialog with Questions => deleteThingARemotely(id)

createThingB(id) => Show dialog with Questions => createThingBRemotely(id)

所以我试图重用对话框组件。显示/隐藏对话框不是问题,因为这可以在化简器中轻松完成。我要指定的是如何根据从左侧开始流动的动作从右侧调度动作。

我建议的方法有点冗长,但是我发现它可以很好地扩展到复杂的应用程序中。当你想显示模式,触发一个动作说明莫代尔你想看到的:

调度动作以显示模态

this.props.dispatch({
  type: 'SHOW_MODAL',
  modalType: 'DELETE_POST',
  modalProps: {
    postId: 42
  }
})

(字符串当然可以是常量;为了简单起见,我使用内联字符串。)

编写Reducer以管理模态

然后确保您有一个只接受这些值的减速器:

const initialState = {
  modalType: null,
  modalProps: {}
}

function modal(state = initialState, action) {
  switch (action.type) {
    case 'SHOW_MODAL':
      return {
        modalType: action.modalType,
        modalProps: action.modalProps
      }
    case 'HIDE_MODAL':
      return initialState
    default:
      return state
  }
}

/* .... */

const rootReducer = combineReducers({
  modal,
  /* other reducers */
})

大!现在,当您分派操作时,state.modal将进行更新以包括有关当前可见的模态窗口的信息。

编写根模态组件

在组件层次结构的根目录中,添加一个<ModalRoot>连接到Redux存储组件。它将收听state.modal并显示适当的模式组件,并从中转发道具state.modal.modalProps

// These are regular React components we will write soon
import DeletePostModal from './DeletePostModal'
import ConfirmLogoutModal from './ConfirmLogoutModal'

const MODAL_COMPONENTS = {
  'DELETE_POST': DeletePostModal,
  'CONFIRM_LOGOUT': ConfirmLogoutModal,
  /* other modals */
}

const ModalRoot = ({ modalType, modalProps }) => {
  if (!modalType) {
    return <span /> // after React v15 you can return null here
  }

  const SpecificModal = MODAL_COMPONENTS[modalType]
  return <SpecificModal {...modalProps} />
}

export default connect(
  state => state.modal
)(ModalRoot)

我们在这里做了什么?ModalRoot读取当前modalTypemodalPropsstate.modal其所连接的,并呈现一个相应的组件,如DeletePostModalConfirmLogoutModal每个模态都是一个组成部分!

编写特定的模态组件

这里没有一般规则。它们只是React组件,可以调度动作,从存储状态读取某些内容,并且碰巧是modal

例如,DeletePostModal可能看起来像:

import { deletePost, hideModal } from '../actions'

const DeletePostModal = ({ post, dispatch }) => (
  <div>
    <p>Delete post {post.name}?</p>
    <button onClick={() => {
      dispatch(deletePost(post.id)).then(() => {
        dispatch(hideModal())
      })
    }}>
      Yes
    </button>
    <button onClick={() => dispatch(hideModal())}>
      Nope
    </button>
  </div>
)

export default connect(
  (state, ownProps) => ({
    post: state.postsById[ownProps.postId]
  })
)(DeletePostModal)

DeletePostModal连接到存储,以便它可以显示文章标题和作品就像任何连接的组件:可以调度的行动,包括hideModal在必要时可以隐藏自身。

提取演示组件

为每个“特定”模态复制粘贴相同的布局逻辑将很尴尬。但是您有组件,对不对?因此,您可以提取一个演示性 <Modal>组件,该组件不知道特定的模态做什么,但可以处理它们的外观。

然后,诸如的特定模态DeletePostModal可以将其用于渲染:

import { deletePost, hideModal } from '../actions'
import Modal from './Modal'

const DeletePostModal = ({ post, dispatch }) => (
  <Modal
    dangerText={`Delete post ${post.name}?`}
    onDangerClick={() =>
      dispatch(deletePost(post.id)).then(() => {
        dispatch(hideModal())
      })
    })
  />
)

export default connect(
  (state, ownProps) => ({
    post: state.postsById[ownProps.postId]
  })
)(DeletePostModal)

由您自己决定<Modal>可以在您的应用程序中接受的一组道具,但是我想您可能会拥有几种模式(例如信息模式,确认模式等)以及它们的几种样式。

辅助功能和隐藏在外部点击或退出键

关于模态的最后一个重要部分是,通常我们希望在用户单击外部或按Escape时将其隐藏。

我建议您不要自己实施它,而不是给您实施建议。考虑可访问性,很难正确。

相反,我建议您使用可访问的现成模式组件,例如react-modal它是完全可定制的,您可以在其中放入任何内容,但是它可以正确处理可访问性,因此盲人仍然可以使用您的模式。

您甚至react-modal可以自己包装<Modal>,接受特定于您的应用程序的道具并生成子按钮或其他内容。全部都是组件!

其他方法

有多种方法可以做到这一点。

有些人不喜欢这种方法的冗长性,而是希望拥有一个<Modal>组件,他们可以使用称为“门户”的技术在其组件内部进行渲染门户使您可以在组件内部渲染组件,而实际上它将在DOM中的预定位置进行渲染,这对于模态非常方便。

实际上,react-modal我以前链接的内容已经在内部完成了,因此从技术上讲,您甚至不需要从顶部进行渲染。我仍然觉得将要显示的模态与显示它的组件分离是很不错的,但是您也可以react-modal直接从您的组件中使用它,而跳过上面我写的大部分内容。

我鼓励您考虑两种方法,进行试验,然后选择最适合您的应用程序和团队的方法。

更新:React 16.0通过链接引入了门户ReactDOM.createPortal

更新:React的下一版本(光纤:可能为16或17)将包括创建门户的方法:ReactDOM.unstable_createPortal() 链接


使用门户

丹·阿布拉莫夫回答第一部分还不错,但是涉及很多样板。正如他所说,您也可以使用门户。我将对该想法进行扩展。

门户的优势在于,弹出窗口和按钮保持非常接近React树,并且使用props进行了非常简单的父/子通信:您可以轻松地处理门户的异步操作,或者让父项自定义门户。

什么是门户?

门户允许您直接在document.body深嵌套在React树中的元素内部进行渲染

这个想法是,例如,您将以下React树渲染到主体中:

<div className="layout">
  <div className="outside-portal">
    <Portal>
      <div className="inside-portal">
        PortalContent
      </div>
    </Portal>
  </div>
</div>

然后您将得到输出:

<body>
  <div class="layout">
    <div class="outside-portal">
    </div>
  </div>
  <div class="inside-portal">
    PortalContent
  </div>
</body>

inside-portal节点已在内部平移<body>,而不是在其通常的深度嵌套位置中平移

何时使用门户

门户对于显示应该在现有React组件之上的元素特别有用:弹出窗口,下拉菜单,建议,热点

为什么要使用门户

不再存在z-index问题:门户网站允许您渲染到<body>如果您想显示一个弹出窗口或下拉菜单,如果您不想与z-index问题抗争,这是一个非常不错的主意。门户元素的添加document.body按安装顺序进行,这意味着除非您使用z-index否则默认行为是按安装顺序将门户堆叠在彼此之上。实际上,这意味着您可以从另一个弹出窗口内部安全地打开一个弹出窗口,并确保第二个弹出窗口将显示在第一个弹出窗口的顶部,而无需考虑z-index

在实践中

最简单:使用本地React状态:如果您认为,对于一个简单的删除确认弹出式窗口而言,拥有Redux样板并不值得,那么您可以使用门户网站,它可以大大简化您的代码。对于这样的用例,其中的交互是非常本地的,并且实际上是一个实现细节,您是否真的关心热重载,时间旅行,动作记录以及Redux为您带来的所有好处?就我个人而言,在这种情况下我不使用本地状态。代码变得非常简单:

class DeleteButton extends React.Component {
  static propTypes = {
    onDelete: PropTypes.func.isRequired,
  };

  state = { confirmationPopup: false };

  open = () => {
    this.setState({ confirmationPopup: true });
  };

  close = () => {
    this.setState({ confirmationPopup: false });
  };

  render() {
    return (
      <div className="delete-button">
        <div onClick={() => this.open()}>Delete</div>
        {this.state.confirmationPopup && (
          <Portal>
            <DeleteConfirmationPopup
              onCancel={() => this.close()}
              onConfirm={() => {
                this.close();
                this.props.onDelete();
              }}
            />
          </Portal>
        )}
      </div>
    );
  }
}

简单:您仍然可以使用Redux state:如果确实要使用,仍然connect可以选择是否DeleteConfirmationPopup显示。由于门户仍然深深地嵌套在您的React树中,因此自定义此门户的行为非常简单,因为您的父级可以将道具传递给该门户。如果您不使用门户,通常必须将弹出窗口呈现在React树的顶部,以用于z-index原因,通常必须考虑诸如“如何根据用例自定义通用的DeleteConfirmationPopup”之类的问题。通常,您会找到解决该问题的非常灵活的解决方案,例如调度包含嵌套的确认/取消操作,翻译包键甚至更糟的是render函数(或其他无法序列化的内容)的操作。您不必使用门户网站就可以这样做,只需传递常规道具即可,因为DeleteConfirmationPopup它只是DeleteButton

结论

门户对于简化代码非常有用。我不能没有他们了。

请注意,门户网站实施还可以帮助您使用其他有用的功能,例如:

  • 辅助功能
  • Espace快捷方式关闭门户
  • 处理外部点击(是否关闭门户)
  • 处理链接单击(是否关闭门户)
  • 在门户网站树中可用的React Context

react-portalreact-modal适用于应全屏显示的弹出窗口,模态和叠加层,通常位于屏幕中间。

对于大多数React开发人员而言,react-tether还是未知的,但是它是您可以在其中找到的最有用的工具之一。Tether允许您创建门户,但会相对于给定目标自动定位门户。这非常适合工具提示,下拉菜单,热点,帮助框...如果位置absolute/relative遇到任何问题z-index,或者下拉菜单超出视口,Tether将为您解决所有问题。

例如,您可以轻松实现新手入门,单击后即可扩展为工具提示:

入职热点

实际的生产代码在这里。再简单不过了:)

<MenuHotspots.contacts>
  <ContactButton/>
</MenuHotspots.contacts>

编辑:刚发现的react-gateway允许将门户呈现到您选择的节点(不一定是主体)中

编辑:似乎react-popper可以替代react-tether。PopperJS是一个仅计算元素适当位置的库,而无需直接接触DOM,让用户选择他想放置DOM节点的位置和时间,而Tether直接附加到主体上。

编辑:也有有趣的react-slot-fill,可以通过允许将元素渲染到保留的元素插槽中来解决类似的问题,该元素插槽放置在树中您想要的任何位置

JS社区的知名专家针对该主题提供了许多很好的解决方案和有价值的评论。这可能表明它并不是看起来那么简单的问题。我认为这就是为什么它可能引起对该问题的怀疑和不确定性。

这里的根本问题是,在React中,只允许将组件安装到其父组件,而这并非总是所需的行为。但是如何解决这个问题呢?

我提出了解决该问题的解决方案。可以在这里找到更详细的问题定义,src和示例:https : //github.com/fckt/react-layer-stack#rationale

基本原理

react/react-dom带有2个基本假设/想法:

  • 每个UI自然都是分层的。这就是为什么我们要components相互包裹的原因
  • react-dom 默认情况下(物理地)将子组件安装到其父DOM节点

问题在于有时第二个属性不是您所需要的。有时,您想将组件安装到不同的物理DOM节点中,并同时保持父级和子级之间的逻辑连接。

典范示例是类似于Tooltip的组件:在开发过程的某个时刻,您可能会发现需要添加一些描述UI element:它将在固定层中呈现,并且应该知道其坐标(即UI element坐标或鼠标坐标)以及在同时它需要信息,无论它是否需要立即显示,其内容以及父组件的某些上下文。此示例表明,有时逻辑层次结构与物理DOM层次结构不匹配。

看看https://github.com/fckt/react-layer-stack/blob/master/README.md#real-world-usage-example来查看具体示例,它是对您问题的回答:

import { Layer, LayerContext } from 'react-layer-stack'
// ... for each `object` in array of `objects`
  const modalId = 'DeleteObjectConfirmation' + objects[rowIndex].id
  return (
    <Cell {...props}>
        // the layer definition. The content will show up in the LayerStackMountPoint when `show(modalId)` be fired in LayerContext
        <Layer use={[objects[rowIndex], rowIndex]} id={modalId}> {({
            hideMe, // alias for `hide(modalId)`
            index } // useful to know to set zIndex, for example
            , e) => // access to the arguments (click event data in this example)
          <Modal onClick={ hideMe } zIndex={(index + 1) * 1000}>
            <ConfirmationDialog
              title={ 'Delete' }
              message={ "You're about to delete to " + '"' + objects[rowIndex].name + '"' }
              confirmButton={ <Button type="primary">DELETE</Button> }
              onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hideMe) } // hide after confirmation
              close={ hideMe } />
          </Modal> }
        </Layer>

        // this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree
        <LayerContext id={ modalId }> {({showMe}) => // showMe is alias for `show(modalId)`
          <div style={styles.iconOverlay} onClick={ (e) => showMe(e) }> // additional arguments can be passed (like event)
            <Icon type="trash" />
          </div> }
        </LayerContext>
    </Cell>)
// ...

我认为最低限度的实现有两个要求。跟踪模态是否已打开的状态,以及在标准反应树之外呈现模态的门户。

下面的ModalContainer组件实现了这些要求以及模态和触发器的相应渲染功能,后者负责执行回调以打开模态。

import React from 'react';
import PropTypes from 'prop-types';
import Portal from 'react-portal';

class ModalContainer extends React.Component {
  state = {
    isOpen: false,
  };

  openModal = () => {
    this.setState(() => ({ isOpen: true }));
  }

  closeModal = () => {
    this.setState(() => ({ isOpen: false }));
  }

  renderModal() {
    return (
      this.props.renderModal({
        isOpen: this.state.isOpen,
        closeModal: this.closeModal,
      })
    );
  }

  renderTrigger() {
     return (
       this.props.renderTrigger({
         openModal: this.openModal
       })
     )
  }

  render() {
    return (
      <React.Fragment>
        <Portal>
          {this.renderModal()}
        </Portal>
        {this.renderTrigger()}
      </React.Fragment>
    );
  }
}

ModalContainer.propTypes = {
  renderModal: PropTypes.func.isRequired,
  renderTrigger: PropTypes.func.isRequired,
};

export default ModalContainer;

这是一个简单的用例...

import React from 'react';
import Modal from 'react-modal';
import Fade from 'components/Animations/Fade';
import ModalContainer from 'components/ModalContainer';

const SimpleModal = ({ isOpen, closeModal }) => (
  <Fade visible={isOpen}> // example use case with animation components
    <Modal>
      <Button onClick={closeModal}>
        close modal
      </Button>
    </Modal>
  </Fade>
);

const SimpleModalButton = ({ openModal }) => (
  <button onClick={openModal}>
    open modal
  </button>
);

const SimpleButtonWithModal = () => (
   <ModalContainer
     renderModal={props => <SimpleModal {...props} />}
     renderTrigger={props => <SimpleModalButton {...props} />}
   />
);

export default SimpleButtonWithModal;

我使用渲染功能,因为我想将状态管理和样板逻辑与渲染的模式和触发器组件的实现隔离开来。这样就可以使渲染的组件成为您想要的任何组件。在您的情况下,我想模态组件可以是连接的组件,该组件可以接收调度异步操作的回调函数。

如果您需要从触发器组件向模态组件发送动态道具(希望这种情况不会经常发生),我建议使用容器组件包装ModalContainer,该组件在其自身状态下管理动态道具并增强原始的渲染方法,例如所以。

import React from 'react'
import partialRight from 'lodash/partialRight';
import ModalContainer from 'components/ModalContainer';

class ErrorModalContainer extends React.Component {
  state = { message: '' }

  onError = (message, callback) => {
    this.setState(
      () => ({ message }),
      () => callback && callback()
    );
  }

  renderModal = (props) => (
    this.props.renderModal({
       ...props,
       message: this.state.message,
    })
  )

  renderTrigger = (props) => (
    this.props.renderTrigger({
      openModal: partialRight(this.onError, props.openModal)
    })
  )

  render() {
    return (
      <ModalContainer
        renderModal={this.renderModal}
        renderTrigger={this.renderTrigger}
      />
    )
  }
}

ErrorModalContainer.propTypes = (
  ModalContainer.propTypes
);

export default ErrorModalContainer;

将模式包装到连接的容器中,然后在此处执行异步操作。这样,您既可以到达调度来触发操作,也可以到达onClose道具。为了达到dispatch从道具,千万不能传递mapDispatchToProps功能connect

class ModalContainer extends React.Component {
  handleDelete = () => {
    const { dispatch, onClose } = this.props;
    dispatch({type: 'DELETE_POST'});

    someAsyncOperation().then(() => {
      dispatch({type: 'DELETE_POST_SUCCESS'});
      onClose();
    })
  }

  render() {
    const { onClose } = this.props;
    return <Modal onClose={onClose} onSubmit={this.handleDelete} />
  }
}

export default connect(/* no map dispatch to props here! */)(ModalContainer);

渲染模态并设置其可见性状态的App:

class App extends React.Component {
  state = {
    isModalOpen: false
  }

  handleModalClose = () => this.setState({ isModalOpen: false });

  ...

  render(){
    return (
      ...
      <ModalContainer onClose={this.handleModalClose} />  
      ...
    )
  }

}
本文地址:http://javascript.askforanswer.com/ruhezaireduxzhongxianshizhixingyibucaozuodemoshiduihuakuang.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!