使用createSlice时能否以类似redux-saga的方式替代createAsyncThunk处理副作用？

在Redux Toolkit中使用createSlice时，完全可以实现和saga一致的「监听指定动作、触发副作用处理、更新状态」的工作模式，主流有两种可选方案：

方案1：直接搭配redux-saga使用（完全保留saga开发习惯） #

Redux Toolkit和redux-saga完全兼容，不需要修改现有slice的核心逻辑，只需要额外配置saga中间件，编写watcher监听slice导出的action即可。

第一步：调整slice代码，新增状态更新action #

import { createSlice } from "@reduxjs/toolkit";

const initialValue = {
    value: 0,
    name: "praful"
}

export const counterSlice = createSlice({
    name: "Counter",
    initialState: initialValue,
    reducers: {
        increment: (state) => {
            state.value += 1
        },
        decrement: (state) => {
            state.value -= 1
        },
        incrementByAmoount: (state, action) => {
            state.value += action.payload
        },
        // 新增saga调用的状态更新action
        nameChangePending: (state) => {
            state.name = "Loading "
        },
        nameChangeSuccess: (state, action) => {
            state.name = action.payload
        },
        nameChangeFailed: (state) => {
            state.name = "Error"
        }
    }
})
export const { increment, decrement, incrementByAmoount, nameChangePending, nameChangeSuccess, nameChangeFailed } = counterSlice.actions
export default counterSlice.reducer

第二步：编写saga监听逻辑 #

// saga.js
import { takeEvery, put, call } from 'redux-saga/effects'
import axios from 'axios'
import { increment, nameChangePending, nameChangeSuccess, nameChangeFailed } from './counterSlice'

// 处理副作用的worker saga
function* fetchNameWorker() {
  try {
    yield put(nameChangePending())
    const result = yield call(axios.get, `https://api.unsplash.com/photos/?client_id=VesHGy2A&page=1&per_page=30`)
    yield put(nameChangeSuccess(result.data[0].user.name))
  } catch (e) {
    yield put(nameChangeFailed())
  }
}

// 监听动作的watcher saga
export function* watchCounterActions() {
  // 每次触发increment动作就执行一次异步拉取逻辑，和saga原生使用逻辑完全一致
  yield takeEvery(increment.type, fetchNameWorker)
}

最后在store配置中引入saga中间件、运行watcher即可，和传统redux+saga的配置逻辑完全相同。

方案2：使用RTK官方Listener Middleware（轻量替代方案，无需generator语法） #

如果不想引入saga的复杂度，可以使用RTK自带的listener middleware实现同样的监听效果，学习成本更低、体积更轻，无需修改原有slice的extraReducers逻辑。

配置示例： #

// store.js
import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'
import { increment } from './counterSlice'
import axios from 'axios'
import { nameChange } from './counterSlice'

const listenerMiddleware = createListenerMiddleware()

// 定义监听器，等价于saga的watcher
listenerMiddleware.startListening({
  actionCreator: increment, // 监听increment动作
  effect: async (action, listenerApi) => {
    // 副作用处理逻辑，等价于saga的worker
    listenerApi.dispatch(nameChange())
    // 也可直接在这里写异步逻辑，复用原有的nameChange的pending/fulfilled/rejected状态处理
  }
})

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().prepend(listenerMiddleware.middleware),
})

方案选择建议 #

• 如果你熟悉saga用法，项目有复杂的副作用控制需求（比如任务竞态、请求取消、防抖节流、动作串行/并行控制），直接选择方案1搭配redux-saga使用即可。
• 如果只是简单的动作监听+异步请求场景，选择方案2的listener middleware足够满足需求，开发效率更高。

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