如何使用 React suspense 更新 redux 存储

Posted 2023-02-21

【中文标题】如何使用 React suspense 更新 redux 存储

【英文标题】：How to update redux store with react suspense

【发布时间】：2021-10-10 17:03:47

【问题描述】：

在下面的代码中，Sample 使用async 函数来获取一些数据。我将使用这些数据来更新 Redux 存储，以便任何组件都可以访问应用程序中的 username。

const resource = fetchData();

function Sample() 
    // throws a promise when retrieving data
    const name = resource.read();

    const dispatch = useDispatch();
    dispatch(setUsername(name));

    const username = useSelector((state) => state.username);

    return <div>User: username</div>;


<Suspense fallback="loading....">
    <Sample />
</Suspense>

在这里，假设没有用户名我的应用程序无法继续。好吧，父级别的<Suspense> 实现了这一点，直到从资源中获取数据。但是，从 Redux 事件调度到 <Sample> 组件重新渲染有一点差距，其中显示 User: 而不是 loading....（事件不要立即强制重新渲染，所以 username 是空的）。所以我会以相同的顺序在网页中看到以下内容

loading.... --> User: --> User: Srinesh

所以我的要求是在商店更新之前显示loading....。在网页上，我期待看到，

loading.... --> User: Srinesh

如果用户名是null，有没有办法在不使用<Sample> 组件级别的另一个条件来显示loading.... 的情况下实现此目的？

【参考方案1】：

第一个问题是在组件渲染逻辑中间调度是一个副作用，你绝对不能这样做。

更安全的地方是 useLayoutEffect 钩子，它会在组件完成渲染后立即调度，但在浏览器有机会绘画之前强制同步重新渲染。这样你就不会看到闪光灯了。