文章/答案/技术大牛

发布

社区首页 >问答首页 >Redux-工具箱- extraReducer中类型错误的原因是什么？

问Redux-工具箱- extraReducer中类型错误的原因是什么？
EN

Stack Overflow用户

提问于 2022-04-23 08:23:50

回答 1查看 401关注 0票数 1

我的redux片中有以下错误：

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;

谢谢你的帮助。

javascript

node.js

reactjs

mern

redux-toolkit

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-04-25 23:51:13

问题是您还没有为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-工具箱为createAsyncThunk提供了一个匹配实用程序，您可以使用它来减少还原器对几个块定义相同逻辑的重复，看看这里。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71978034

复制

相似问题

问Redux-工具箱- extraReducer中类型错误的原因是什么？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Redux-工具箱- extraReducer中类型错误的原因是什么？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Redux-工具箱- extraReducer中类型错误的原因是什么？
EN