Redux toolkit - addCase不能被同一个action类型的两个reducer调用

Question

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

请帮助我解决以下错误。如果多个api调用添加案例是不可能在createSlice和我们怎么能做到这一点与redux工具包。////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Answer 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
});
}
})

Answer 2

我相信@lost_in_magento所说的是正确的。但是如果你仍然看到这个错误，你可以不把它们链接在一起，而是像下面这样在构建器实例上创建每个addCase:

...
extraReducers: (builder) => {
// fetchBreakingNewsData
builder.addCase(fetchBreakingNewsData.pending, (state, action) => {
state.status = 'loading'
});
builder.addCase(fetchBreakingNewsData.fulfilled, (state, action) => {
state.status = 'succeeded'
// Add any fetched posts to the array
state.breakingNews = state.breakingNews.concat(action.payload)
});
builder.addCase(fetchBreakingNewsData.rejected, (state, action) => {
state.status = 'failed'
state.error = action.error.message
});

// fetchGeneralNewsData
builder.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)
});
builder.addCase(fetchGeneralNewsData.rejected, (state, action) => {
state.status = 'failed'
state.error = action.error.message
});
}
...

Answer 3

你有fetchBreakingNewsData。等待两次。我猜你指的是fetchBusinessNewsData。等待第二次。

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.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