redux-toolkit 给了我循环依赖问题

Question

我以前从未遇到过这个问题...但现在它给了我...

   // TS7022: 'rootReducer' implicitly has type 'any' because it does not
   // have a type annotation and is referenced directly or indirectly in its own initializer
const rootReducer =  combineReducers({
  employee: employee.reducer,
  company: company.reducer,
  alerts: alerts.reducer,
});


  // gives error: TS2456: Type alias 'RootState' circularly references itself.
export type RootState = ReturnType<typeof rootReducer>;

function makeStore() {
  return configureStore(
  {
    reducer: rootReducer,
    devTools: true,
  })
}

Answer 1

TLDR：从减速器操作中的状态中删除类型推断。

在你的切片中：

...reducers: {
     setSomeData: (state /* don't infer RootState here */, action: PayloadAction<boolean>) => {...

到目前为止我发现（不知道为什么）是由于您定义的减速器操作所致。通常，您会使用工具包定义一个减速器，如下所示：

const someSlice = createSlice({
name: 'sliceNameHere',
initialState,
reducers: {
    setSomeData: (state: RootState, action: PayloadAction<boolean>) => {
        state.someSlice.loading = action.payload
    },
}, ...

不管出于什么原因，如果我们将reducer操作中的状态类型设置为RootState，redux就会变得疯狂并开始抛出这些循环依赖错误。

一种临时修复方法是从状态中删除 RootState，以便您的切片如下所示：

const someSlice = createSlice({
name: 'sliceNameHere',
initialState,
reducers: {
    setSomeData: (state, action: PayloadAction<boolean>) => {
        state.someSlice.loading = action.payload
    },
}, ...

现在，这将抛出 TS 错误（取决于您的 eslint 设置），该错误的状态为任何类型，但可以被静音。

这是我想出的最好的办法，并将密切关注实际的修复。