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工具包。////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
我想要一个不同的方法,看看是否适合你。
将构建器与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
});
}
})
我相信@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
});
}
...
你有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