Redux 工具包 - 不能使用两个 reducer 调用相同操作类型的 addCase答案

【问题标题】：Redux toolkit - addCase cannot be called with two reducers for the same action typeRedux 工具包 - 不能使用两个 reducer 调用相同操作类型的 addCase
【发布时间】：2021-12-08 23:15:01
【问题描述】：

import { createAsyncThunk,createSlice } from "@reduxjs/toolkit"
import axios from "axios"
import apiHandler from "../../api/apiHandler"

const initialState = {
    breakingNews:[],
    general:[],
    technology:[],
    sports:[],
    business:[],
    status:'idle',
    error:null
}

export const fetchBreakingNewsData = createAsyncThunk('news/breakingNews',apiHandler.getBreakingNewsData)
export const fetchGeneralNewsData = createAsyncThunk('news/generalNews',apiHandler.getCategoryNewsData('general'))
export const fetchTechnologyNewsData = createAsyncThunk('news/technologyNews',apiHandler.getCategoryNewsData('technology'))
export const fetchSportsNewsData = createAsyncThunk('news/sportsNews',apiHandler.getCategoryNewsData('sports'))
export const fetchBusinessNewsData = createAsyncThunk('news/businessNews',apiHandler.getCategoryNewsData('business'))




const newsSlice = createSlice({
    name:'news',
    initialState,
    extraReducers(builder){
        builder
        .addCase(fetchBreakingNewsData.pending, (state, action) => {
          state.status = 'loading'
        })
        .addCase(fetchBreakingNewsData.fulfilled, (state, action) => {
          state.status = 'succeeded'
          // Add any fetched posts to the array
          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'
          // Add any fetched posts to the array
          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'
            // Add any fetched posts to the array
            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'
            // Add any fetched posts to the array
            state.sports = state.sports.concat(action.payload)
          })
          .addCase(fetchSportsNewsData.rejected, (state, action) => {
            state.status = 'failed'
            state.error = action.error.message
          })
          .addCase(fetchBreakingNewsData.pending, (state, action) => {
            state.status = 'loading'
          })
          .addCase(fetchBusinessNewsData.fulfilled, (state, action) => {
            state.status = 'succeeded'
            // Add any fetched posts to the array
            state.business = state.business.concat(action.payload)
          })
          .addCase(fetchBusinessNewsData.rejected, (state, action) => {
            state.status = 'failed'
            state.error = action.error.message
          })
    }
})

export default newsSlice.reducer

请帮助我解决以下错误。如果在 createSlice 中无法进行多个 api 调用添加案例，我们如何使用 redux 工具包来做到这一点。 ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////p>

【问题讨论】：

错误是什么？
addCase 不能用两个 reducer 调用相同的动作类型
哪种操作类型？

标签： javascript react-native redux redux-toolkit

【解决方案1】：

我想要一种不同的方法，看看是否适合你。

将构建器与 addCase 分开。可以试试告诉我吗

const newsSlice = createSlice({
    name:'news',
    initialState,
    extraReducers: (builder) => {
        builder
        .addCase(fetchBreakingNewsData.pending, (state, action) => {
          state.status = 'loading'
        })
        .addCase(fetchBreakingNewsData.fulfilled, (state, action) => {
          state.status = 'succeeded'
          // Add any fetched posts to the array
          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'
        });
        

       builder
       .addCase(fetchGeneralNewsData.fulfilled, (state, action) => {
          state.status = 'succeeded'
          // Add any fetched posts to the array
          state.general = state.general.concat(action.payload)
        })
        .addCase(fetchGeneralNewsData.rejected, (state, action) => {
          state.status = 'failed'
          state.error = action.error.message
        });
    }
})

【讨论】：