createAsyncThunk：错误：无法使用同一操作类型的两个减速器调用 addCase

Question

当我将操作连接到 extraReducers 时发生此错误 我的代码是

export const fetchCountries = createAsyncThunk(
  `country`, 
  async (organizationId: string) => {

export const saveCountry = createAsyncThunk(
  `country`,
  async ({ } => {})

const regions = createSlice({
  name,
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder.addCase(fetchCountries.pending, isFetching);
    builder.addCase(fetchCountries.rejected, error);
    builder.addCase(fetchCountries.fulfilled, (state, action) => {});

    builder.addCase(saveCountry.pending, isFetching);
    builder.addCase(saveCountry.rejected, error);
    builder.addCase(saveCountry.fulfilled, (state, {payload}) => {});

如果我运行我会收到此错误：

Error: addCase cannot be called with two reducers for the same action type

Answer 1

发生这种情况是因为在我的操作中，很少有 AsyncThunks 操作具有相同的 typePrefix。

所以它必须有不同的名称：

export const fetchCountries = createAsyncThunk(
  `getCountry`, //<------ this first argument (name) must be unique
  async (organizationId: string) => {

export const saveCountry = createAsyncThunk(
  `postCountry`,
  async ({ } => {})

Answer 2

在我的例子中，显示了相同的错误消息，但这是一个不同的错误：

.addCase(setAddress.pending, (state, action) => {
    state.setAddressStatus = 'Pending';
})
.addCase(setAddress.fulfilled, (state, action) => {
    state.setAddressStatus = 'Fulfilled';  
})
.addCase(setAddress.fulfilled, (state, action) => { // I repeated fulfilled 
    state.getAddressesStatus = 'Rejected';
    console.error(action.error);
})
            

我花了几分钟才找到问题，可能会帮助别人。

Answer 3

在 CreateAsycThunk 中您提到了同名的字符串，它应该是这样的

export const fetchCountries = createAsyncThunk(
  `country`, 
  async (organizationId: string) => {

export const saveCountry = createAsyncThunk(
  `saveCountry`,
  async ({ } => {})

const regions = createSlice({
  name,
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder.addCase(fetchCountries.pending, isFetching);
    builder.addCase(fetchCountries.rejected, error);
    builder.addCase(fetchCountries.fulfilled, (state, action) => {});

    builder.addCase(saveCountry.pending, isFetching);
    builder.addCase(saveCountry.rejected, error);
    builder.addCase(saveCountry.fulfilled, (state, {payload}) => {});

Answer 4

createasyncthunk 有两个主要参数，一个是 string 类型，另一个是以 api 和 thunk 作为参数的回调函数。 如果您的切片中有一个 asyncthunk，其中包含“”作为数据，您可能会感到抱歉，但如果您有两个或多个 asyncthunk，则将对每个 thunk 进行检查，如果其中两个或多个具有相似的“”或“相同”的名称那么你会得到令人不安的错误。 “createAsyncThunk：错误：无法使用同一操作类型的两个减速器调用 addCase”

Answer 5

如果您的 createAsnyncThunk 使用相同的 typePrefix

const updateEventsCal = createAsyncThunk(
EVENTS_CAL_UPDATE, // using an existing typePrefix say EVENTS_CAL_ADD
async (data) => {
 }

这会引发同样的错误。

Answer 6

就这样吧

const  {pending,fulfilled,rejected} = fetchCountries
    builder.addCase(pending, isFetching);
    builder.addCase(rejected, error);
    builder.addCase(fulfilled, (state, action) => {});

Answer 7

您遇到此错误是因为您尝试添加具有相同 typePrefix 的多个 asyncthunk，即 createAsyncthunk 中的第一个参数。每个 asyncthunk 必须有一个唯一的 typePrefix。要解决此问题，您只需为每个 createAsyncthunk 创建一个唯一的 typePrefix

export const fetchCountries = createAsyncThunk(
  `fetch-country`, 
  async (organizationId: string) => {

export const saveCountry = createAsyncThunk(
  `save-country`,
  async ({ } => {})

当您尝试使用 addCase 函数为同一操作类型添加多个减速器时，您也可能会收到相同的错误消息，即

const regions = createSlice({
  name,
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder.addCase(fetchCountries.pending, isFetching);
    builder.addCase(fetchCountries.rejected, error);
    builder.addCase(fetchCountries.fulfilled, (state, action) => {});
    
    builder.addCase(fetchCountries.fulfilled, (state, action) => {});
 
    builder.addCase(saveCountry.pending, isFetching);
    builder.addCase(saveCountry.rejected, error);
    builder.addCase(saveCountry.fulfilled, (state, {payload}) => {});

Answer 8

我也遇到了同样的问题，请看下面：

//api to get data customers
export const getCustomers = createAsyncThunk('/api/users/customers',async() =>{
    ...
});
//api to add customer
export const addCustomer = createAsyncThunk<User,{ user: User, token: string }>('/api/users/add_customer', async ({ user, token }) => {
    ...
});

我遇到了问题，因为我在第一个和第二个asyncthunk中写了这个路径/api/users/customers，要解决它，只需重命名它，就我而言，首先我没有更改它/api/users /customers 和第二个 /api/users/add_customer