Redux-toolkit - Что может быть причиной ошибки типа в extraReducer?

У меня есть следующая ошибка в моем редукционном срезе:

Uncaught TypeError: Cannot read properties of undefined (reading 'type')
    at Object.addCase (mapBuilders.ts:158:1)
    at extraReducers (boerseSlice.js:89:1)
    at executeReducerBuilderCallback (mapBuilders.ts:194:1)
    at buildReducer (createSlice.ts:300:1)
    at reducer (createSlice.ts:323:1)
    at redux.js:436:1
    at Array.forEach (<anonymous>)
    at assertReducerShape (redux.js:434:1)
    at combineReducers (redux.js:499:1)
    at configureStore (configureStore.ts:144:1)

Вот строка 89 из моего слайса:

.addCase(createBoersenwerte.fulfilled, (state,action)=>{
            state.isLoading = false;
            state.isSuccess = true;
            state.boersenwerte.push(action.payload);
        })

Вот полный фрагмент:

import {createSlice, createAsyncThunk} from "@reduxjs/toolkit"
import boersenwerteService from "./boersenwerteService";
const initialState = {
    boersenwerte: [],
    isLoading:false,
    isError:false,
    isSuccess:false,
    message:"",
}
export const createBoersenwerte = createAsyncThunk("boersenwerte/", async (boersenwerteData, thunkAPI)=>{
    try{
        const token = thunkAPI.getState().auth.user.token;
        return await boersenwerteService.createBoersenwerte(boersenwerteData, token);
    } catch(error){
        const message = (error.response && 
            error.response.data && 
            error.response.data.message)
            || error.message
            || error.toString()
            return thunkAPI.rejectWithValue(message);
    }
})
//update
export const updateBoersenwerte = createAsyncThunk("/boersenwerte/update", async (id, thunkAPI)=>{
    try{
        const token = thunkAPI.getState().auth.user.token;
        return await boersenwerteService.updateBoersenwerte(id, token);
    } catch(error){
        const message = (error.response 
            && error.response.data 
            && error.response.data.message) 
            || error.message 
            || error.toString();
        return thunkAPI.rejectWithValue(message);
    }
})
//delete
export const deleteBoersenwerte = createAsyncThunk("/boersenwerte/delete", async (id, thunkAPI)=>{
    try{
        const token = thunkAPI.getState().auth.user.token;
        return await boersenwerteService.deleteBoersenwerte(id, token);
    } catch(error){
        const message = (error.response 
            && error.response.data 
            && error.response.data.message) 
            || error.message 
            || error.toString();
        return thunkAPI.rejectWithValue(message);
    }
})
//getOne
export const getBoersenwerte = createAsyncThunk("/boersenwerte/find/", async (id, thunkAPI)=>{
    try{
        return await boersenwerteService.getBoersenwerte(id);
    } catch(error){
        const message = (error.response 
            && error.response.data 
            && error.response.data.message) 
            || error.message 
            || error.toString();
        return thunkAPI.rejectWithValue(message);
    }
})
//getall
export const getAllBoersenwerte = createAsyncThunk("/boersenwerte/find", async (_, thunkAPI)=>{
    try{
        return await boersenwerteService.getAllBoersenwerte();
    } catch(error){
        const message = (error.response 
            && error.response.data 
            && error.response.data.message) 
            || error.message 
            || error.toString();
        return thunkAPI.rejectWithValue(message);
    }
})


export const boersenwerteSlice = createSlice({
    name:"boersenwerte",
    initialState,
    reducers:{
        reset: (state)=>initialState,
    }, extraReducers: (builder)=>{
        builder
        .addCase(createBoersenwerte.pending, (state)=>{
            state.isLoading = true;
        })
        .addCase(createBoersenwerte.fulfilled, (state,action)=>{
            state.isLoading = false;
            state.isSuccess = true;
            state.boersenwerte.push(action.payload);
        })
        .addCase(createBoersenwerte.rejected, (state,action)=>{
            state.isLoading = false;
            state.isError = true;
            state.message = action.payload;
        })
        .addCase(updateBoersenwerte.pending, (state)=>{
            state.isLoading = true;
        })
        .addCase(updateBoersenwerte.fulfilled, (state, action)=>{
            state.isLoading = false;
            state.isSuccess = true;
            state.boersenwerte.push(action.payload);
        })
        .addCase(updateBoersenwerte.rejected, (state, action)=>{
            state.isLoading = false;
            state.isError = true;
            state.message = action.payload;
        })
        .addCase(deleteBoersenwerte.pending, (state)=>{
            state.isLoading = true;
        })
        .addCase(deleteBoersenwerte.fulfilled, (state, action)=>{
            state.isLoading = false;
            state.isSuccess = true;
            state.boersenwerte = state.boersenwerte.filter((boersenwerte)=> boersenwerte._id !== action.payload.id);
        })
        .addCase(deleteBoersenwerte.rejected, (state, action)=>{
            state.isLoading = false;
            state.isError = true;
            state.message = action.payload;
        })
        .addCase(getBoersenwerte.pending, (state)=>{
            state.isLoading = true;
        })
        .addCase(getBoersenwerte.fulfilled, (state, action)=>{
            state.isLoading = false;
            state.isSuccess = true;
            state.boersenwerte = action.payload;
        })
        .addCase(getBoersenwerte.rejected, (state, action)=>{
            state.isLoading = false;
            state.isError = true;
            state.message = action.payload;
        })
        .addCase(getAllBoersenwerte.pending, (state)=>{
            state.isLoading = true;
        })
        .addCase(getAllBoersenwerte.fulfilled, (state, action)=>{
            state.isLoading = false;
            state.isSuccess = true;
            state.boersenwerte = action.payload;
        })
        .addCase(getAllBoersenwerte.rejected, (state, action)=>{
            state.isLoading = false;
            state.isError = true;
            state.message = action.payload;
        })
    }
})
export const {reset} = boersenwerteSlice.actions;
export default boersenwerteSlice.reducer;

Вот полный служебный файл:

import axios from "axios";

const API_URL = "/api/boersenwerte/";

const createBoersenwerte = async (boersenwerteData, token)=>{
    const config ={
        headers:{
        accessToken: token,
        }
    }
    const response = await axios.post(API_URL, boersenwerteData, config);
    return response.data;
}
//update
const updateBoersenwerte = async (boersenwerteId,  boersenwerteData, token)=>{
    const config = {
          headers:{
        accessToken: token,
        }
    }
    const response = await axios.put(API_URL + boersenwerteId,  boersenwerteData, config);
    return response.data;
}
//delete
const deleteBoersenwerte = async (boersenwerteId, token)=>{
    const config = {
          headers:{
        accessToken: token,
        }
    }
    const response = await axios.delete(API_URL + boersenwerteId, config);
    return response.data;
}
//getOne
const getBoersenwerte = async (boersenwerteId)=>{
   
    const response = await axios.get(API_URL + boersenwerteId);
    return response.data;
}
//getAll
const getAllBoersenwerte = async ()=>{
   
    const response = await axios.get(API_URL);
    return response.data;
}

const boersenwerteService = {
    createBoersenwerte,
    updateBoersenwerte,
    deleteBoersenwerte,
    getBoersenwerte,
    getAllBoersenwerte,
}
export default boersenwerteService;

Спасибо за вашу помощь.

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
0
32
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что вы не указали имя действия для createBoersenwerte thunk, попробуйте изменить это:

// add create after the slash
export const createBoersenwerte = createAsyncThunk("boersenwerte/create", async (boersenwerteData, thunkAPI)=>{
    try{
        const token = thunkAPI.getState().auth.user.token;
        return await boersenwerteService.createBoersenwerte(boersenwerteData, token);
    } catch(error){
        const message = (error.response && 
            error.response.data && 
            error.response.data.message)
            || error.message
            || error.toString()
            return thunkAPI.rejectWithValue(message);
    }
})

просматривая ваш код, я мог заметить, что вы используете одно и то же имя действия для двух переходников, вы должны изменить его, чтобы избежать дальнейших ошибок:

// changed to findAll
export const getAllBoersenwerte = createAsyncThunk("/boersenwerte/findAll", async (_, thunkAPI)=>{
    try{
        return await boersenwerteService.getAllBoersenwerte();
    } catch(error){
        const message = (error.response 
            && error.response.data 
            && error.response.data.message) 
            || error.message 
            || error.toString();
        return thunkAPI.rejectWithValue(message);
    }
})

И последнее, возможно, это не подойдет в вашем случае, но всегда полезно знать некоторые приемы, redux-toolkit предоставляет подходящая утилита для createAsyncThunk, который вы можете использовать для уменьшения повторения ваших редюсеров, определяющих одну и ту же логику для нескольких переходников, взгляни сюда .

Другие вопросы по теме