如何处理 redux 中的弹出状态？

Question

假设我的页面上有一个“用户信息”弹出窗口、“Feeds”弹出窗口、“菜单”弹出组件和更多弹出窗口。如果我打开任何弹出窗口，其余弹出窗口将关闭。如果我在外面点击，它们都被关闭了。

如何在 redux 或 redux-react-local 中处理弹出状态？

如果我添加更多document.addEventListener("click", function)，会影响性能吗？

事件委派如何处理全局（文档）点击、按键、...事件？

Answer 1

我会将事件处理程序添加到每个弹出窗口，并让您的减速器负责相应地更改状态。每个弹出窗口都有一个 ID。当一个特定的被点击时，reducer 会将它的状态设置为打开，其余的设置为关闭。

点击外部可能是失去焦点的事件处理程序。我认为您不需要任何全球性事件。

初始状态示例：

const initialState = {
    popup1: false, // closed
    popup2: false, // closed
    ...
}

reducer 示例：

const { popId } = action;
case 'POPUP_CLICKED':
    const newState = { ...initialState };
    newState[popId] = true; // opened
    return { newState };

case 'POPUP_LOST_FOCUS':
    return { ...initialState };

当然，如果您有其他状态属性，请不要这么直接地重置状态并迭代，或者设置一个名为popups 的属性作为所有弹出窗口的状态并重置它们。无论哪种方式，这组操作应该足以处理所有边缘情况。