如何用react悬念更新redux store

Question

在下面的代码中，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....的情况下实现这一点?

Answer 1

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

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