javascript Redux工具包：未捕获的类型错误：无法读取未定义的属性(阅读“type”)

kiz8lqtg 于 2023-03-16 发布在 Java

关注(0)|答案(3)|浏览(150)

当我在切片内的extraReducers中添加特定操作时，收到以下错误：
Uncaught TypeError: Cannot read properties of undefined (reading 'type') .
示例：

import { createSlice } from '@reduxjs/toolkit'

export const mySlice = createSlice({
  name: 'name',
  initialState,
  extraReducers: (builder) => {
    // If I console.log action2 here, it turns out to be undefined
    builder.addCase(action1, () => ...) 
    builder.addCase(action2, () => ...) // when I add this specific action I get the error.
  },
  reducers: {
    ...
  },
})

action2的定义与action1类似，在另一个文件中：

import { createAction } from '@reduxjs/toolkit'

export const action2 = createAction(
  'action2'
)

为什么action2在mySlice中未定义？我错过了什么吗？

更新 *：来自文档：

使用createAction生成的操作创建者可以使用计算属性语法直接用作此处的键。
如果我理解正确的话，我可以把这部分替换掉：
builder.addCase(action2, () => ...)
用这个
builder.addCase("action2", () => ...)
这的确可以解决问题，但这个解决办法是否正确呢？
即便如此，理解为什么在使用第一种方法时action2看起来像undefined还是很好的。

JavaScript

来源：https://stackoverflow.com/questions/69895743/redux-toolkit-uncaught-typeerror-cannot-read-properties-of-undefined-reading

3条答案

按热度按时间

ldxq2e6h1#

你很可能遇到了一个循环导入依赖问题。是否有其他切片文件也导入了这个切片文件？如果有，这通常会导致其中一个切片在另一个文件的createSlice调用运行时没有初始化，因此所有被导入的操作创建者仍然是undefined。
https://redux-toolkit.js.org/usage/usage-guide#exporting-and-using-slices
RTK版本1.7.0-beta.1实际上有一个潜在的修复这个问题，通过惰性示例化减速器。请尝试一下，看看它是否为您修复的东西：
https://github.com/reduxjs/redux-toolkit/releases/tag/v1.7.0-beta.1

赞(0）回复(0）举报 2023-03-16

oiopk7p52#

我不明白你的问题，但我解决了相关的错误，请检查代码
这是我创建切片的代码

const counterSlice = createSlice({
  name: "Counter",
  initialState: initialState,
  reducers: {
    incer: studentData,
    decrement: Decrement,
  },
  extraReducers(builder) {
    builder
      .addCase(fetchPost.pending, postsRequested)
      .addCase(fetchPost.fulfilled, postsRecived)
      .addCase(fetchPost.rejected, postReuestFailed);
  },
});

这是我的减速器代码

export const postsRequested = (state, action) => {
  state.status = "loading";
};

export const postsRecived = (state, action) => {
  state.status = "Sucess";
  const loadedPost = action.payload;
  state.students.push(loadedPost);
};

export const postReuestFailed = (state, action) => {
  state.status = "Failed";
  state.error = action.error.message;
};

赞(0）回复(0）举报 2023-03-16

dxxyhpgq3#

我也面临着同样的问题。你可能试图访问一个未定义的对象的属性。当你试图访问一个未定义或空的对象的属性时，就会发生这个错误。检查你的createAsyncThunk（）

赞(0）回复(0）举报 2023-03-16