如何正确输出通过Redux Thunk异步获取的服务端数据？

你现在的问题和thunk、异步加载延迟没有关系，纯粹是useState的用法错了：useState接收的初始参数仅在组件首次挂载时读取一次，后续Redux store中servicesData更新时，本地state的services不会自动同步更新，这才是你看到store里已经存了数据、组件本地state还是初始空数组的原因。

绝大多数场景下你根本不需要额外用useState二次存储从Redux取到的值。useAppSelector（也就是封装过的useSelector）本身自带store订阅能力：只要你选中的store状态发生变化，组件会自动触发重渲染，拿到最新的状态值，直接用它渲染即可。

正确的取值逻辑：

// 直接从store取数据，不需要额外包一层本地state
const servicesData = useAppSelector((state) => state.services.services);

// 处理加载态即可
if (servicesData.length === 0) {
  return <div>服务数据加载中...</div>
}

// 正常渲染servicesData
return (
  <ul>
    {servicesData.map(service => <li key={service.id}>{service.name}</li>)}
  </ul>
)

如果你确实有特殊需求（比如要基于全局数据做组件内的编辑草稿，修改不影响全局store），需要把store值同步到本地state，那必须加useEffect监听store值的变化，手动触发本地state更新：

const servicesData = useAppSelector((state) => state.services.services);
const [services, setServices] = useState(servicesData);

// 监听store值变化，同步到本地state
useEffect(() => {
  setServices(servicesData)
}, [servicesData])

这种写法属于特殊场景的适配，纯展示场景完全没必要这么写，平白增加冗余逻辑。

• thunk的作用从来不是帮你把异步数据同步到组件，它解决的是Redux原生不支持异步逻辑的问题：原生Redux的dispatch只能接收普通plain object类型的action，没法直接处理接口请求、延迟执行这类异步逻辑。thunk作为Redux中间件，扩展了dispatch的能力，允许你dispatch一个函数（也就是thunk action），你可以在这个函数里写完整的异步流程，等异步操作结束后再调用普通action更新store，把异步逻辑从组件中抽离，统一收敛到Redux的动作层管理。

一个标准的thunk action示例：

// 这就是thunk action，返回值是函数而非普通对象
export const fetchServicesList = () => async (dispatch) => {
  // 先触发加载状态
  dispatch({ type: 'services/setLoading', payload: true })
  try {
    const response = await fetch('/api/services')
    const result = await response.json()
    // 请求成功后把数据存入store
    dispatch({ type: 'services/setList', payload: result })
  } catch (error) {
    // 捕获错误存入store
    dispatch({ type: 'services/setError', payload: error })
  } finally {
    dispatch({ type: 'services/setLoading', payload: false })
  }
}

组件里只需要在合适的时机（比如useEffect中）调用dispatch(fetchServicesList())即可，不需要在组件内堆砌请求、错误处理、加载态管理的逻辑，多个组件需要触发同一份数据请求时，直接复用这个thunk action就行。

• 不是所有数据获取场景都必须用thunk。如果你的异步请求只在单个组件内使用，数据不需要全局共享、不需要跨组件触发更新、不需要统一缓存，完全可以直接在组件useEffect里写请求逻辑，用本地useState存储结果即可，不需要强行引入thunk增加复杂度。只有当异步逻辑需要复用、异步状态需要全局共享时，thunk才是可选项，现在也有更适合数据请求的方案比如RTK Query、SWR等，可以根据场景选择，不用拘泥于必须用某一种工具。

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