Redux Toolkit报错addCase cannot be called with two reducers for the same action type如何解决

你遇到的addCase cannot be called with two reducers for the same action type报错，是因为代码中extraReducers的builder链式调用里，重复注册了同一个action类型的处理函数：
你已经在最开始声明了fetchBreakingNewsData.pending的处理逻辑，在体育新闻的三个状态处理完成后，又重复写了一次fetchBreakingNewsData.pending的注册，同一个action type不能绑定两个reducer，因此触发报错。
另外你还漏掉了fetchBusinessNewsData.pending的处理逻辑，多余的重复注册占了这个位置。

删除多余的重复fetchBreakingNewsData.pending注册代码，补充fetchBusinessNewsData.pending的处理即可，修改后的extraReducers部分代码如下：

extraReducers(builder){
    builder
    .addCase(fetchBreakingNewsData.pending, (state, action) => {
      state.status = 'loading'
    })
    .addCase(fetchBreakingNewsData.fulfilled, (state, action) => {
      state.status = 'succeeded'
      state.breakingNews = state.breakingNews.concat(action.payload)
    })
    .addCase(fetchBreakingNewsData.rejected, (state, action) => {
      state.status = 'failed'
      state.error = action.error.message
    })
    .addCase(fetchGeneralNewsData.pending, (state, action) => {
      state.status = 'loading'
    })
    .addCase(fetchGeneralNewsData.fulfilled, (state, action) => {
      state.status = 'succeeded'
      state.general = state.general.concat(action.payload)
    })
    .addCase(fetchGeneralNewsData.rejected, (state, action) => {
      state.status = 'failed'
      state.error = action.error.message
    })
    .addCase(fetchTechnologyNewsData.pending, (state, action) => {
        state.status = 'loading'
      })
      .addCase(fetchTechnologyNewsData.fulfilled, (state, action) => {
        state.status = 'succeeded'
        state.technology = state.technology.concat(action.payload)
      })
      .addCase(fetchTechnologyNewsData.rejected, (state, action) => {
        state.status = 'failed'
        state.error = action.error.message
      })
      .addCase(fetchSportsNewsData.pending, (state, action) => {
        state.status = 'loading'
      })
      .addCase(fetchSportsNewsData.fulfilled, (state, action) => {
        state.status = 'succeeded'
        state.sports = state.sports.concat(action.payload)
      })
      .addCase(fetchSportsNewsData.rejected, (state, action) => {
        state.status = 'failed'
        state.error = action.error.message
      })
      // 替换原来重复的fetchBreakingNewsData.pending，补充business的pending处理
      .addCase(fetchBusinessNewsData.pending, (state, action) => {
        state.status = 'loading'
      })
      .addCase(fetchBusinessNewsData.fulfilled, (state, action) => {
        state.status = 'succeeded'
        state.business = state.business.concat(action.payload)
      })
      .addCase(fetchBusinessNewsData.rejected, (state, action) => {
        state.status = 'failed'
        state.error = action.error.message
      })
}

createSlice完全支持为多个异步API调用添加addCase处理，没有数量限制，只要保证每个action类型只被注册一次处理函数即可。

你当前的写法共用了全局的status和error字段，如果多个请求同时发起，状态会互相覆盖，建议做如下优化：

• 给每个新闻分类单独设置状态字段，比如breakingNewsStatus、breakingNewsError，每个请求只修改自己对应的状态，避免互相干扰
• 用addMatcher统一处理公共逻辑，减少重复代码，比如所有pending状态都修改对应分类的加载状态，不用每个请求单独写一遍
• 如果你处理的是大量同类型的接口请求，也可以使用RTK Query来统一管理接口的缓存、加载、错误状态，减少重复的样板代码。

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