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

Question

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

假设我想删除一些东西，那么我将发送一个类似deleteSomething(id)的操作，这样一些reducer将捕获该事件并填充对话框reducer以显示它。

当这个对话框提交时，我的疑问就来了。

null

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

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

所以我正在尝试重用dialog组件。显示/隐藏对话框这不是问题，因为这可以很容易地在reducer中完成。我试图指定的是，如何根据在左侧启动流的动作，从右侧分派动作。

Answer 1

我建议的方法有点冗长，但我发现它可以很好地扩展到复杂的应用程序中。当你想要显示一个模态时，激发一个动作来描述你想要看到的模态：

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 */
})

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

例如，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。

为每个“特定”模式复制粘贴相同的布局逻辑会很尴尬。但你有部件，对吧？因此，您可以提取一个表示性的 组件，该组件不知道特定的情态词做什么，但处理它们的外观。

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)

这是由您提出一组 可以在您的应用程序中接受的道具，但我想您可能有几种情态（例如，info情态、confirment情态等），以及它们的几种风格。

关于情态动词的最后一个重要部分是，通常我们希望在用户单击外部或按Escape时隐藏它们。

与其给你执行这一点的建议，我建议你只是不要自己去执行。考虑到可访问性，很难做到正确。

您甚至可以将react-modal包装在自己的 中，该 接受特定于应用程序的道具并生成子按钮或其他内容。都只是部件！

做这件事的方法不止一种。

有些人不喜欢这种方法的冗长，他们更喜欢有一个 组件，他们可以通过一种称为“门户”的技术在组件内部呈现该组件。门户允许您在您的内部呈现组件，而实际上它将在DOM中的预定位置呈现，这对MODALS非常方便。