使用Redux Toolkit时组件在加载前提前渲染（约1ms）的修复方法咨询

1. 修正Redux初始状态 #

问题核心是页面初始化时loading初始值为false，导致先渲染<HomePage/>，随后请求触发pending将loading设为true，请求完成后又快速切回false，造成闪现。

修改Redux切片的初始状态，将loading默认设为true：

const initialState = {
  loading: true, // 初始化为true，页面进入直接显示Loader
  // 其他状态字段...
};

2. 给Loader设置最小显示时长 #

如果请求本身极快（比如命中缓存、本地数据），即使初始loading为true，也可能因为状态切换太快导致闪现。可以在组件层添加延迟逻辑，强制Loader至少显示一段时间：

import { useState, useEffect } from 'react';

// 在主页组件内
const { loading } = useSelector(state => state.root);
const [showLoader, setShowLoader] = useState(loading);

useEffect(() => {
  let timer;
  if (loading) {
    setShowLoader(true);
  } else {
    // 延迟300ms隐藏Loader，可根据需求调整时长
    timer = setTimeout(() => setShowLoader(false), 300);
  }
  // 组件卸载或依赖变化时清除定时器
  return () => clearTimeout(timer);
}, [loading]);

渲染时使用showLoader代替原loading状态：

<div className='home-page'>
  {showLoader ? <Loader/> : <HomePage/>}
</div>

3. 在异步请求中添加最小延迟 #

也可以在RTK的异步Thunk中，给请求添加固定延迟，确保Loader有足够的显示时间：

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchRoot = createAsyncThunk('root/fetch', async () => {
  // 发起数据请求
  const response = await fetch('/api/root');
  const data = await response.json();
  
  // 强制等待至少300ms，避免请求过快导致的闪现
  await new Promise(resolve => setTimeout(resolve, 300));
  
  return data;
});

内容的提问来源于stack exchange，提问作者Максим Захаров