Question

我也是React和Redux的新手。我想从列表中删除项目，因此我发送了一个动作export const deleteSelectedItems = () => { return { type: ActionTypes.ITEM.DELETE_SELECTED, payload: { confirm: { message: 'Are you sure you want to delete these selected items?' } } } };然后我使用redux中间件来捕获它并显示确认。如下所示：

动作：

const confirmMiddleware = store => next => action => {
  if (action.payload.confirm) {
    if (confirm(action.payload.confirm.message)) {
      next(action);
    }
  } else {
    next(action);
  }
};

中间件：

confirm()

一切都运作良好。现在，我不想使用ConfirmDialog来显示确认对话框，我想使用我自己的confirmMiddleware组件。我发现@Dan Abramov solution，这很棒。但我很困惑如何将它们整合在一起。我想使用messages发送一个显示模态的动作，但我不知道当用户点击确定或取消模态时如何处理。我怎么能这样做？

Answer 1

Redux中间件并不是UI的正确位置，它只适用于您现有的实现，因为window.confirm具有神奇的力量，可以阻止执行的线程。

相反，我建议您调度单独的操作来打开确认对话框，例如CONFIRM_DELETE_ITEMS切换标志以指示应显示对话框，然后在单击对话框确认按钮时调度DELETE_ITEMS操作。

e.g。

function Root({ dispatch, confirmDeleteItems }) {
    return (
        <div>
            {confirmDeleteItems ? (
                <ConfirmDialog onConfirm={() => dispatch(deleteItems())} onDeny={() = dispatch(hideModal())} />
            ) : null}
            <button onClick={() => dispatch(confirmDeleteItems())}>Delete</button>
        </div>
    )
}

Answer 2

我设法独立地重新发明了Dan在该问题中描述的模态管理技术，然后将其推得更远。我在https://www.reddit.com/r/reactjs/comments/4wjmme/implement_a_confirm_modal_using_react_redux/d68ajcw?context=3处写了我的方法。引用自己：

我有一个中央组件，负责以正确的布局顺序显示所有当前打开的对话框（即，我可以在“DialogA”之上设置“DialogB”等）。想要触发显示对话框的组件运行一个动作创建者，该动作创建者调度“SHOW_DIALOG”动作，其中包含有效负载中对话框组件的名称，以及附加到动作的任意附加数据。该数据被添加到商店，对话框管理组件将在渲染时将该额外数据作为道具传递给对话框组件。

我已经创建了一些通用的“选择器”对话框，比如ColorPicker和IconPicker。这些对话框对我的应用程序的其余部分一无所知。他们可以在道具中获取一些可选的数据（例如最初选择的颜色值），并且还在寻找名称为“onColorSelected”的特殊道具。请求对话框的组件可以包含整个另一个操作作为有效负载的一部分，当对话框单击其“确定”按钮时，将调度该新操作以及对话框的“返回值”。 / p>

因此，一般来说，我的建议是包含一个传递给对话框的普通操作对象，对话框可以在关闭时调度该操作的副本。

React确认modal和redux中间件

2 个答案: