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


240

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

假设我想删除一些东西,然后我将调度一个类似的操作,deleteSomething(id)以便某些化简器会捕获该事件并填充对话框化简器以显示它。

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

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

编辑:

使其更清楚:

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

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

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


1
我认为在您的情况下,对话状态(隐藏/显示)是本地的。我会选择使用react状态来管理显示/隐藏对话框。这样,“根据第一动作采取适当行动”的问题将消失。

Answers:


516

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

调度动作以显示模态

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直接从您的组件中使用它,而跳过上面我写的大部分内容。

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


35
我建议的一件事是让reducer维护一系列可以被推送和弹出的模态。听起来很傻,我一直遇到这样的情况:设计师/产品类型希望我从模态中打开模态,并且很高兴允许用户“返回”。
凯尔

9
是的,肯定是Redux易于构建的一种东西,因为您可以将状态更改为数组。我个人曾与设计师合作,相反,他们希望模态是唯一的,所以我写的方法解决了意外嵌套的问题。但是,是的,您可以同时使用。
Dan Abramov

4
以我的经验,我会说:如果模式与本地组件相关(例如,删除确认模式与Delete按钮相关),则使用门户更为简单,否则可以使用redux动作。同意@Kyle,应该可以从模式中打开一个模式。默认情况下,它也可以与门户网站一起使用,因为添加门户网站是为了记录正文,因此门户网站可以很好地相互堆叠(直到您将z-index:p弄乱为止)
Sebastien Lorber

4
@DanAbramov,您的解决方案很棒,但是我有个小问题。不严重。我在项目中使用Material-ui,当关闭模态时,将其关闭,而不是“播放”淡出动画。大概需要做些延迟吗?还是将每个模式作为ModalRoot内的列表保存在那里?有什么建议吗?
gcerar'3

7
有时我想在模式关闭后调用某些函数(例如,使用模式内部的输入字段值调用函数)。我会将这些功能传递modalProps给操作。这违反了保持状态可序列化的规则。我该如何克服这个问题?
chmanie '16

98

更新: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,它很有趣,并且可以通过允许将元素渲染到保留在元素中所需位置的保留元素插槽中来帮助解决类似问题


在您的示例代码段中,如果您确认操作(与单击“取消”时相反),确认弹出窗口将不会关闭
dKab

将您的Portal导入包括在代码段中会很有帮助。什么图书馆<Portal>来自哪里?我猜这是个反应门户,但是一定要知道。

1
@skypecakes,请考虑我的实现为伪代码。我没有针对任何具体的库对其进行测试。我只是在这里教这个概念,而不是具体的实现。我习惯于react-portal,上面的代码应该可以正常工作,但是几乎可以在任何类似的lib中正常工作。
Sebastien Lorber

react-gateway很棒!它支持服务器端渲染:)
cyrilluce

我很新手,因此很乐意对此方法进行一些解释。即使您确实在其他位置渲染了模态,在这种方法中,如果您应该渲染模态的特定实例,则也必须检查每个删除按钮。在redux方法中,我仅显示或不显示模态的一个实例。这不是性能问题吗?
阿米特·纽豪斯

9

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>)
// ...

2

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

下面的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;

0

将模式包装到连接的容器中,然后在此处执行异步操作。这样,您既可以到达调度来触发动作,也可以到达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} />  
      ...
    )
  }

}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.