Redux Toolkit使用Async Thunk时遇addCase重复action类型报错求助

核心错误：语法括号嵌套错误 #

你代码里的addCase调用存在语法错误，错误地用括号将action creator和reducer函数包裹成了逗号表达式，导致addCase没有接收到正确的action类型参数。

看你这段错误代码：

builder
  .addCase(
    (fetchUsers.fulfilled,
    (state, action) => {
      console.log(action)
      if (state !== []) state = action
    })
  )

这里的(fetchUsers.fulfilled, reducer函数)是逗号表达式，它的返回值是后面的reducer函数，相当于你给addCase只传了一个reducer参数，而没有指定对应的action类型。两个addCase都出现这个错误时，Redux Toolkit会默认处理同一个无效的action类型，因此抛出addCase cannot be called with two reducers for the same action type的错误。

修正步骤 #

1. 修正addCase的语法：去掉多余的括号，将action creator作为第一个参数，reducer作为第二个参数传递给addCase。
2. 修复reducer逻辑错误：
   • 数组不能直接用state !== []判断是否为空，应该用state.length === 0
   • 直接给state赋值不会触发Redux的状态更新，需要修改数组本身或者返回新数组
   • reduceUsers的初始状态是数组，不存在state.users属性，直接操作数组即可

修正后的reduceUsers代码：

const reduceUsers = createReducer([], (builder) => {
  builder
    .addCase(fetchUsers.fulfilled, (state, action) => {
      console.log(action)
      // 清空原数组并添加新数据
      state.splice(0, state.length, ...action.payload)
    })
    .addCase(addUser.fulfilled, (state, action) => {
      // 向数组末尾添加新用户
      state.push(action.payload)
    })
})

额外注意点 #

• createAsyncThunk返回的action的payload是你在thunk函数里return的数据，所以要使用action.payload而不是直接用action
• Redux Toolkit的createReducer允许直接修改state（内部通过Immer处理不可变更新），不要直接给state赋值，而是修改数组的内容

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