如何使用RootState修复切片的循环依赖性？

问题描述

我最近开始使用redux-toolkit，并在他们的文档之后开始使用createSlice编写我的化简。

一个化简器，我们称其为reducerA，导入customAsyncFunction来处理其回调，此函数是通过createAsyncThunk创建的，该函数依次在调用{时读取RootState {1}}，现在的问题是，当导入thunkApi.getState()时，将导入RootReducer，从而产生循环引用。

基本上：RootReducer-> reducerA->操作-> RootReducer-> ...

下面，我试图简化问题。

reducerA

在this section of the documentation中，提到了发生这种情况的可能性，并且有模糊的建议将代码拆分为文件。但是，从我所有的尝试中，我似乎找不到解决此问题的方法。

解决方法

仅类型的循环引用就可以了。 TS编译器将在编译时解决这些问题。特别是，通常有一个片文件导出其减速器，将减速器导入商店设置，基于该片定义RootState类型，然后将RootState类型重新导入回一个切片文件。

仅当涉及运行时行为（例如，两个切片取决于彼此的操作）时，循环导入才是潜在的问题。

不幸的是，据我所知，用于捕获循环依赖项的ESLint规则无法告诉我们导入的只是 类型。

,

阅读了following docs section关于如何将createAsyncThunk与TypeScript结合使用后，我已将extraReducers的实现更改为使用builder模式而不是传递键值对象，错误消失。

// before
const slice = createSlice({
  ...
  extraReducers: {
    [customAsyncAction.fulfilled.toString()]: ... // handles fulfilled action
  }
});

// after
const slice = createSlice({
  ...
  extraReducers: builder => {
    builder.addCase(customAsyncAction.fulfilled,(state,action) => ...)
  }
});

我必须承认我无法确切指出为什么在第一种情况下它不起作用，而在第二种情况下它起作用。