从Redux迁移至Redux Toolkit，含API请求的自定义Action该如何改写？

核心说明 #

你通过createSlice生成的是同步更新状态的Action Creator，包含接口请求的异步逻辑本身不属于slice内部reducers字段的管理范围，以下提供两种迁移方案：

方案1：最小改动适配（几乎保留原有异步逻辑） #

首先修正你现有slice的命名（createSlice返回的是切片对象而非直接reducer），导出内置的同步Action：

import { createSlice } from '@reduxjs/toolkit'

const peopleSlice = createSlice({
  initialState: { getPeople: {} },
  name: "listPeople",
  reducers: {
    setPeople(state, action) {
      return {
        ...state,
        getPeople: action.payload
      }
    }
  }
})

// 导出同步Action Creator，用于dispatch更新状态
export const { setPeople } = peopleSlice.actions
// 导出reducer注册到store
export default peopleSlice.reducer

原有异步Action只需要修改dispatch的部分，替换为调用上面导出的同步Action即可，其余逻辑完全不变：

export function listPeople(config: any) {
  return function (dispatch: any) {
    makeApiRequest(config)
      .then((resp) => {
        dispatch(setPeople(resp.data))
      })
      .catch((error) => {
        dispatch(setPeople(error))
      })
  }
} 

方案2：使用Redux Toolkit内置的createAsyncThunk规范实现 #

如果需要统一管理请求的加载、错误状态，推荐用RTK内置的异步thunk生成工具，不需要手动写thunk模板代码：

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'

// 第一步：定义异步请求thunk
export const fetchPeople = createAsyncThunk(
  'listPeople/fetchPeople', // 唯一Action类型前缀，和slice的name保持一致即可
  async (config: any, { rejectWithValue }) => {
    try {
      const resp = await makeApiRequest(config)
      return resp.data
    } catch (error) {
      return rejectWithValue(error)
    }
  }
)

// 第二步：在slice中通过extraReducers处理异步thunk的三个状态
const peopleSlice = createSlice({
  initialState: { 
    getPeople: {},
    loading: false, // 可扩展请求加载状态
    error: null // 可扩展请求错误状态
  },
  name: "listPeople",
  reducers: {},
  extraReducers: (builder) => {
    builder
      // 请求发起时的处理
      .addCase(fetchPeople.pending, (state) => {
        state.loading = true
        state.error = null
      })
      // 请求成功时的处理
      .addCase(fetchPeople.fulfilled, (state, action) => {
        state.loading = false
        state.getPeople = action.payload
      })
      // 请求失败时的处理
      .addCase(fetchPeople.rejected, (state, action) => {
        state.loading = false
        state.error = action.payload
      })
  }
})

export default peopleSlice.reducer

使用时和你原有异步Action的调用方式完全一致，直接在组件中dispatch(fetchPeople(config))即可。

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