代码之家 › 专栏 › 技术社区 › matt lohkamp

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

redux javascript

matt lohkamp · 技术社区 · 5 年前

假设我有三个Web组件—A、B和C—每个组件都在关注一个全球redux商店。这三种方法都会观察到状态的变化,并根据需要做出响应。

{ showPopups: true }

组件B和C注意到这个值,每个组件都会显示一个弹出窗口来响应。现在,预期的行为已执行,但是 showPopups 残余 true

组件A触发第二个不相关的redux操作-结果,状态发生变化,组件B和C注意到 显示窗口 价值仍然存在 符合事实的

我们不希望这样——而避免这种情况的一个简单方法就是设置 lastShowPopups 在组件B和C内部,将最后一个值与当前值进行比较,然后变化从…起 false 符合事实的 .

但是,如果组件A触发了第一个redux操作呢 再一次 ? 符合事实的 ,这意味着状态没有改变,这意味着弹出窗口不会显示。我们可以通过巧妙地设置该值来避免这种情况——比如,我们可以将该值指定为 new Boolean(1) 而不是 符合事实的 . 新布尔值(1) 新布尔值(1)

所以它仍然会触发状态变化,这意味着我们的组件会注意到设置为 符合事实的 和忽略它,因为它们的内部 最后的显示窗口 变量仍然是也

我们如何告诉组件B和C只触发其行为一次,第一次,当发生不相关的状态更改且触发该行为的旧值保持不变时,不重新触发,但如果导致状态值更改的操作再次发生,也允许这些行为重新触发?

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

0 回复 | 直到 5 年前

Sheldon R 5 年前

既然国家只描述什么在给定的时刻,你必须自己处理这样的事情。

对于类似的弹出窗口或通知,您可以在同一个操作创建者(如果您使用的是诸如redux thunk之类的thunk中间件)中调度另一个操作,该操作将在 setTimeout 如果需要在不同的时间或根据不同的条件隐藏弹出窗口,则需要为每个弹出窗口的状态存储值。

因此,对于给定的示例,您的动作创建者可能看起来像下面的组件,此时只显示组件A showPopupA1 是 true false . 这使得一切都完全由状态控制,并避免了在重新渲染时出现任何奇怪的问题。

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 要分派多个这样的操作,或从中的弹出组件分派隐藏弹出操作,请执行以下操作: componentDidMount

推荐文章

zuZuu · React Redux-无法设置未定义的属性(设置“value”)

2 年前

universe11 · 对伊默来说,这是正确的还是错误的?

3 年前

Huy282002 · 将redux toolkit与JS一起使用时,不能跳过在CreateSicle()中键入状态

3 年前

Mistakamikaze · React Redux |在全局Redux状态之前更新本地状态

3 年前

Kiv Daor · 当某些项具有未知值时,排序数组无法正常工作

3 年前

Chong Lip Phang · 不变性检查中间件在Redux工具包中做什么?

3 年前

geyser · React Redux toolkit-输入字段的状态管理

3 年前

Avishay Matayev · 正在获取redux的connect HOC的包装组件类型,以便与React一起使用。在不重新导入的情况下重新创建对象

3 年前

Hamed Ezati · 为什么项目会附加到redux而不是替换?

3 年前

Arash jahan bakhshan · redux未使用React 18重新呈现组件

3 年前