javascript - 使用 Redux 状态更改来触发不同 Web 组件中的一次性行为

Question

假设我有三个 Web 组件 - A、B 和 C - 每个组件都关注全局 redux 存储。这三者都观察状态的变化，并在他们认为合适的时候使用react。

组件 A 触发一个 redux Action ，它改变状态中的一个值:{ showPopups: true }

组件 B 和 C 注意到这个值，并分别通过显示弹出窗口进行响应。现在，预期的行为已经执行，但 showPopups 仍然是 true。

组件 A 触发第二个不相关的 redux 操作 - 结果，状态发生变化，组件 B 和 C 注意到 showPopups 值仍然是 true，并响应第二次显示他们的弹出窗口。

我们不希望这样——避免这种情况的一种简单方法是在组件 B 和 C 中设置 lastShowPopups，将最后一个值与当前值进行比较，仅 如果值更改从false 到true，则触发弹出显示。

但是，如果组件 A 再次触发第一个 redux 操作怎么办？ showPopups 已经是 true，这意味着状态不会改变，这意味着弹出窗口不会显示。我们可以尝试通过巧妙地设置该值来避免这种情况 - 例如，我们可以将值分配为 new Boolean(1) 而不是 true。 new Boolean(1) 是真的，但它并不严格等于另一个 new Boolean(1)，对吧？

因此它仍然会触发状态更改，这意味着我们的组件注意到 showPopups 设置为 true，并且...忽略它，因为它们的内部 lastShowPopups 变量也仍然是 true。

我们如何告诉组件 B 和 C 只触发它们的行为一次，第一次，当不相关的状态变化发生并且触发行为的旧值保持不变时不要重新触发，但也允许这些行为重新触发如果促成状态值变化的 Action 再次发生？

换句话说，您可以使用 Redux 状态更改来触发不同 Web 组件中的一次性行为吗？

Answer 1

由于状态仅描述给定时刻的是，因此您必须自己处理此类事情。

对于这样的东西 - 弹出窗口或通知，你可以在同一个 Action 创建者中调度另一个 Action (如果你使用像 redux-thunk 这样的 thunk 中间件)，它在 setTimeout 中创建弹出窗口，它将再撕下来。如果需要在不同时间或根据不同标准隐藏弹出窗口，则需要为每个弹出窗口存储值。

因此，对于给出的示例，您的操作创建器可能如下所示，其中组件 A 仅在 showPopupA1 为 true 时显示，而在 时从不显示错误。这使一切都完全受状态控制，并避免了重新渲染时出现任何奇怪的问题。

export const showPopups = () => {
    return dispatch => {
        dispatch({
            type: SHOW_POPUPS
        })
        // sets showPopupA, showPopupB to true

        setTimeout(() => {
            dispatch({
                type: HIDE_POPUP_A
            })
        }, 5000)
        // sets showPopupA to false

        setTimeout(() => {
            dispatch({
                type: HIDE_POPUP_B
            })
        }, 10000)
        // sets showPopupB to false
    }
}

你需要使用像 redux-thunk 这样的中间件像这样分派(dispatch)多个 Action ，或者从 componentDidMount 中的弹出组件分派(dispatch) HIDE_POPUP Action 或其他东西，这只是稍微干净一些。