Redux工具包- addCase不能用两个reducer为同一个action类型调用

arknldoa  于 2023-08-05  发布在  其他
关注(0)|答案(3)|浏览(136)
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调用来添加case,那么我们如何使用redux工具包来完成呢?////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

vc9ivgsu

vc9ivgsu1#

我想换个方法看看对你是否有效。
将构建器与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
        });
    }
})

字符串

5uzkadbs

5uzkadbs2#

我相信@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
    });
}
...

字符串

i34xakig

i34xakig3#

你有fetchBreakingNewsData.挂起在那里两次。我假设你的意思是fetchBusinessNewsData.pending第二次。

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

相关问题