如何解决 Redux 工具包循环依赖操作 -> 选择器 -> reduceR语言 > 操作(未定义 的 .fullfill )

Question

在定义我的操作、减少程序和选择器时，我想尝试将它们保存在单独的文件中，以便我的文件夹结构如下所示：

- store 
-- foo.actions.ts 
-- foo.reducer.ts 
-- foo.selectors.ts

在我的foo.actions.ts文件中，我定义了包括AsyncThunk操作在内的所有操作。其中一些操作引用foo.selectors.ts文件中的选择器。例如

import { selectById } from "./foo.selectors.ts"
export const barAction = createAsyncThunk<IFoo, { foo: IFoo }, { state: IFooState, rejectValue: IFoo }>(
FooActionTypes.Bar,
async (payload: {foo: IFoo}, {getState, rejectWithValue}) => {
const existingFoo = selectById(getState(), payload.foo.id);
...
}
);

foo.selectors.ts文件引用foo.reducer.ts文件以使用用于创建减速器初始状态的entityAdapter。例如

import { fooAdapter } from "./foo.reducer.ts"
export const { selectById } = fooAdapter.getSelectors();

foo.reducer.ts然后在createReducer函数中引用foo.actions.ts来引用thunk类型。

import { barAction } from "./foo.actions.ts"
export const fooAdapter = createEntityAdapter<IFoo>(...);
const initialState = fooAdapter.getInitialState();
export const reducer = createReducer(initialState, builder => 
builder
.addCase(barAction.fulfilled, ...)
):

这产生了actions -> selectors -> reducer -> actions的循环依赖性，进而导致错误Cannot read properties of undefined (reading 'fulfilled')

有没有什么方法可以在保持文件夹结构的同时解决这个问题，或者在同一个文件中使用thunks和reducer是不可避免的？

Answer 1

在构建器回调中添加方法体可能已经有所帮助。

export const reducer = createReducer(initialState, builder => {
builder
.addCase(barAction.fulfilled, ...)
}
);

除此之外，您可以将您的entityAdapter移到第四个文件中。