useDispatch触发异步请求后useSelector无法获取Redux状态值

无法获取更新后的Redux值的核心原因是错误将useSelector返回值作为useState的初始值传入：

• useState的初始值仅在组件首次挂载时生效一次，后续Redux状态更新触发useSelector返回新值时，不会同步更新你声明的本地状态，因此首次加载时永远只能拿到初始的空数组。
• 你写的useEffect依赖是本地状态rows，首次加载时rows为空数组，触发请求后Redux状态虽然更新了，但本地rows不会同步变更，自然拿不到新值；触发热重载时组件会重新初始化，刚好把当时Redux中已经存好的值读入useState初始值，才会出现热更新后数据正常的假象。
• 额外逻辑问题：fetchEmployeesThunk.pending回调中手动将state.value重置为空数组，会导致请求发起阶段直接清空已有数据，出现不必要的空白闪屏。

• 移除包裹useSelector的useState：useSelector本身会订阅Redux状态变化，状态更新时会自动触发组件重渲染，直接使用其返回值即可，不需要额外存本地状态。
• 修正useEffect依赖：数据请求仅需在组件挂载时触发一次，不要将rows作为依赖，否则会在数据更新后重复触发请求导致死循环。
• 调整pending状态逻辑：请求加载中只更新状态标记即可，不要清空已存在的列表数据。
• 清理冗余代码：你同时实现了createAsyncThunk和手动thunk函数fetchEmployees，功能完全重复，保留createAsyncThunk即可，不需要额外手写异步action。

组件代码 #

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchEmployeesThunk } from './your-slice-path';

export default function HomePage() {
  const dispatch = useDispatch();
  // 直接通过useSelector订阅Redux值，不要套useState
  const rows = useSelector(state => state.employeelist.value);
  const fetchStatus = useSelector(state => state.employeelist.status);

  useEffect(() => {
    dispatch(fetchEmployeesThunk());
  }, [dispatch]);

  // 表格组件直接接收rows作为数据源即可，可通过fetchStatus判断是否展示loading态
  return (
    {/* 你的表格组件，例如 <Table dataSource={rows} loading={fetchStatus === 'loading'} /> */}
  )
}

Slice中extraReducers修正 #

extraReducers: (builder) => {
  builder
    .addCase(fetchEmployeesThunk.pending, (state) => {   
      state.status = 'loading';
      // 移除 state.value = [] 逻辑，不要清空已有数据
    })
    .addCase(fetchEmployeesThunk.fulfilled, (state, action) => {
      state.value = action.payload;
      state.status = 'finished';
    })
    // 建议补充rejected状态捕获请求错误
    .addCase(fetchEmployeesThunk.rejected, (state, action) => {
      state.status = 'failed';
      state.error = action.error.message;
    })
},

内容的提问来源于stack exchange，提问作者Venky