使用redux-toolkit时是否还需要redux-saga？无saga如何实现对应功能

你对「reducer内部不能dispatch action」的认知完全正确，reducer必须是无副作用的纯函数，不能执行dispatch这类操作。你目前用到的两个redux-saga能力，不用saga完全可以用Redux Toolkit原生能力实现，无需额外引入第三方库。

1. 监听action触发副作用的替代方案 #

Redux Toolkit 官方提供了createListenerMiddleware中间件，专门用于实现「action派发、reducer执行完成后触发对应副作用」的需求，完全可以替代你现在用的takeEvery能力，示例代码如下：

import { createListenerMiddleware } from '@reduxjs/toolkit'
import { boardAcctions } from './boardSlice'

// 实例化listener中间件
const listenerMiddleware = createListenerMiddleware()

// 添加监听规则
listenerMiddleware.startListening({
  // 匹配你需要监听的4个widget相关action
  matcher: (action) => [
    boardAcctions.addWidget.type,
    boardAcctions.moveWidget.type,
    boardAcctions.updateWidgetConfig.type,
    boardAcctions.removeWidget.type
  ].includes(action.type),
  // 匹配到action后执行的副作用逻辑
  effect: async (action, listenerApi) => {
    // 这里写入你原来updateWidgetUI函数的逻辑即可
    updateWidgetUI(action.payload)
  }
})

// 将中间件注册到store
export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().prepend(listenerMiddleware.middleware),
})

这个中间件也原生支持takeLatest、防抖、节流、任务取消等常用流控能力，足够覆盖绝大多数普通业务场景。

2. 单个副作用内派发多个action的实现 #

你认为createAsyncThunk无法派发其他action是认知误区，createAsyncThunk的回调函数第二个参数就暴露了dispatch方法，你可以直接在逻辑里派发任意多个action，示例代码如下：

import { createAsyncThunk } from '@reduxjs/toolkit'
import { loginActions } from './loginSlice'
import { dashboardAction } from './dashboardSlice'

export const login = createAsyncThunk(
  'login/getUserInfo',
  async (loginForm, { dispatch }) => {
    // 调用登录接口获取用户信息
    const userdata = await loginApi(loginForm)
    // 调用面板接口获取数据
    const dashboarData = await getDashboardApi(userdata.userId)
    // 依次派发多个action更新不同模块状态
    dispatch(loginActions.updateUser(userdata))
    dispatch(dashboardAction.updateBoard(dashboarData))
    return userdata
  }
)

是否需要继续保留redux-saga的判断标准 #

你可以根据项目实际使用场景判断：

• 如果你的项目仅用到了上述两种基础的saga能力，没有使用saga的复杂异步流控能力（比如任务队列、多任务依赖调度、全局的请求取消/重试逻辑等），完全可以移除redux-saga，使用RTK原生的listener + thunk组合，依赖更轻，代码维护成本更低
• 如果你的项目已经深度使用了saga的高级特性，且现有逻辑运行稳定，不需要强行重构移除saga，Redux Toolkit和redux-saga完全可以共存使用。

内容的提问来源于stack exchange，提问作者Mr.Trieu