如何在Redux Thunk异步请求期间为React组件添加加载指示器

1. 改造post-thunk.js，用createAsyncThunk封装异步请求 #

Redux Toolkit 内置的createAsyncThunk会自动生成异步请求的三个状态动作：请求中（pending）、请求成功（fulfilled）、请求失败（rejected），无需手动分发状态动作。

// post-thunk.js
import { createAsyncThunk } from '@reduxjs/toolkit'
import { fetchPostListApi } from '你的接口请求文件路径'

export const fetchPostList = createAsyncThunk(
  'posts/fetchPostList', // 唯一的action类型前缀，避免冲突
  async (params, { rejectWithValue }) => {
    try {
      const res = await fetchPostListApi(params)
      return res.data
    } catch (err) {
      return rejectWithValue(err.message)
    }
  }
)

2. 改造post-slice.js，新增状态字段监听请求状态 #

在切片的初始状态中新增isLoading加载状态、error错误状态，通过extraReducers监听thunk的三个状态，自动修改对应状态值。

// post-slice.js
import { createSlice } from '@reduxjs/toolkit'
import { fetchPostList } from './post-thunk'

const initialState = {
  list: [], // 原有文章列表状态
  isLoading: false, // 新增加载状态
  error: null // 新增错误状态（可选）
}

const postSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {
    // 原有同步reducer保留在此处
  },
  extraReducers: (builder) => {
    builder
      // 请求发起时，开启加载状态，清空历史错误
      .addCase(fetchPostList.pending, (state) => {
        state.isLoading = true
        state.error = null
      })
      // 请求成功时，关闭加载状态，存储返回的文章数据
      .addCase(fetchPostList.fulfilled, (state, action) => {
        state.isLoading = false
        state.list = action.payload
      })
      // 请求失败时，关闭加载状态，存储错误信息
      .addCase(fetchPostList.rejected, (state, action) => {
        state.isLoading = false
        state.error = action.payload
      })
  }
})

export default postSlice.reducer

3. 改造Posts组件，读取状态判断渲染逻辑 #

// Posts 组件
import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { fetchPostList } from './post-thunk'

const Posts = () => {
  const dispatch = useDispatch()
  // 从Redux存储中读取对应状态
  const { isLoading, list, error } = useSelector(state => state.posts)

  // 组件挂载时发起请求
  useEffect(() => {
    dispatch(fetchPostList())
  }, [dispatch])

  // 错误提示（可选）
  if (error) return <div>请求失败：{error}</div>

  return (
    <div>
      {isLoading && <div>Loading...</div>}
      {!isLoading && (
        <ul>
          {list.map(post => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

export default Posts

如果你不想使用createAsyncThunk，手写自定义thunk也可以实现相同逻辑：先在slice中定义fetchStart、fetchSuccess、fetchFail三个同步reducer分别修改加载状态、存储数据、存储错误，在自定义thunk中请求发起前分发fetchStart，请求成功分发fetchSuccess，请求失败分发fetchFail即可。

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