React确认模式和Redux中间件

Question

我也是React和Redux的新手。 我想从列表中删除项目，所以我调度动作deleteSelectedItems然后使用redux中间件来捕获它并显示确认。 如下所示：

行动：

export const deleteSelectedItems = () => {
  return {
    type: ActionTypes.ITEM.DELETE_SELECTED,
    payload: {
      confirm: {
        message: 'Are you sure you want to delete these selected items?'
      }
    }
  }
};

中间件：

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

一切正常。 现在，我不想使用confirm()来显示确认对话框，而是要使用自己的ConfirmDialog组件。 我发现@Dan Abramov解决方案 ，这很棒。 但是我很困惑如何将它们整合在一起。 我想使用confirmMiddleware来调度显示模式的动作，但是当用户单击“确定”或在模式上取消时，我不知道如何处理。 我怎样才能做到这一点？

Answer 1

Redux中间件并不是真正适合UI的地方，它只能在您现有的实现中真正起作用，因为window.confirm具有强大的功能并且可以停止执行线程。

相反，我建议分派一个单独的操作以打开确认对话框，例如CONFIRM_DELETE_ITEMS ，它会切换一个标志以指示该对话框应显示，然后在单击对话框的确认按钮时分派DELETE_ITEMS操作。

例如

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在该期中描述的模式管理技术，然后再将其推向更远。 我在使用React＆Redux的实现确认模式中写了自己的方法，引述我自己：

我有一个中央组件，负责以正确的布局顺序显示所有当前打开的对话框（即，我可以在“ DialogA”的顶部放置“ DialogB”，依此类推）。 要触发显示对话框的组件运行一个动作创建器，该动作创建器将分派“ SHOW_DIALOG”动作，并在有效负载中添加对话框组件的名称，并将任意附加数据附加到该动作。 该数据将添加到存储中，并且对话框管理组件将在渲染时将这些额外数据作为道具传递给对话框组件。

我创建了一些通用的“选择器”对话框，例如ColorPicker和IconPicker。 这些对话框对我的应用程序的其余部分一无所知。 他们可以在其属性中获取一些可选的数据位（例如最初选择的颜色值），并且还在寻找名称类似于“ onColorSelected”的特殊属性。 请求对话框的组件可以包括另一个动作的全部内容，作为有效负载的一部分，并且当单击对话框的“确定”按钮时，该新动作将与对话框的“返回值”一起分派。

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