如何解决 Redux Toolkit 循环依赖 action -> selector -> reducer -> action (.fullfilled of undefined)

Question

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

- 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 文件以使用用于创建减速器初始状态的实体适配器。例如

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')

有没有办法在保持文件夹结构的同时解决这个问题，或者是否不可避免地将 thunk 和 reducer 放在同一个文件中？

Answer 1

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


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

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

如何解决 Redux Toolkit 循环依赖 action -> selector -> reducer -> action (.fullfilled of undefined)

How to solve Redux Toolkit circular dependency action -> selector -> reducer -> action (.fullfilled of undefined)

reactjs

redux

react-redux

redux-toolkit