redux-toolkit giving me that circular dependency issue

user_1054992 0
Viewed 214

I have never run into this issue before... but its giving it to me now...

   // 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,
  })
}
redux-toolkit reactjs
1 Answers

TLDR: remove type infertion from state in reducer action.

In your slice:

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

What I found so far (not sure why) is that it's due to the reducer action you define. Normally you would define a reducer with toolkit like so:

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

For whatever reason if we set the type of the state in the reducer action to RootState, redux goes crazy and starts throwing these circular dependency errors.

One temporary fix is to remove RootState from the state so that your slice looks like so:

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

Now, this will throw TS errors (depending on your eslint settings) that state is of type any but that can be silenced.

That's the best I came up with and will keep an eye out for an actual fix.

user_86690250
Related