javascript - Redux 工具包 : Uncaught TypeError: Cannot read properties of undefined (reading 'type' )

Question

当我在切片内的 extraReducers 中添加特定操作时出现以下错误:

未捕获的类型错误:无法读取未定义的属性(读取“类型”)。

例子:

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 中未定义？我错过了什么吗？

更新:来自 documentation :

Action creators that were generated using createAction may be used directly as the keys here, using computed property syntax.

如果我的句子正确，我可以替换这部分:

builder.addCase(action2, () => ...)

用这个:

builder.addCase("action2", () => ...)

确实可以解决问题。这个解决方案是否正确？

即便如此，理解为什么 action2 在与第一种方法一起使用时看起来是 undefined 还是很不错的。

Answer 1

您很可能遇到循环导入依赖问题。是否还有其他切片文件也导入了这个？如果是这样，这通常会导致其中一个切片在另一个文件的 createSlice 调用运行时未被初始化，因此所有被导入的 Action 创建者仍然是 undefined.

https://redux-toolkit.js.org/usage/usage-guide#exporting-and-using-slices

RTK 版本 1.7.0-beta.1 实际上通过延迟实例化 reducer 可以解决此问题。请尝试一下，看看它是否能为您解决问题:

https://github.com/reduxjs/redux-toolkit/releases/tag/v1.7.0-beta.1