Recherche de site Web

typescript - Résoudre le problème de cycle de dépendance dans une application NextJS


J'ai un problème avec un cycle de dépendances dans mon application NextJS que j'essaie actuellement de résoudre.

Voici mes fichiers. Je n'ai inclus que les imports qui montrent une erreur de cycle de dépendance.

store.ts :

import rootSaga from './sagas/rootSaga';import authSliceStore from './slices/auth/authSlice.store';
// Dependency cycle via ./auth/auth.saga    

const persistConfig = {
  key: 'ea-root',
  version: 1,
  storage,
  blacklist: ['authError'],
};

export const rootReducer = combineReducers({
  auth: authSliceStore,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

const sagaMiddleware = createSagaMiddleware();
const middleware = [sagaMiddleware];

/**
 * Creates a store and includes all the slices as reducers.
 */
export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(middleware),
  devTools: process.env.NODE_ENV !== 'production',
});

sagaMiddleware.run(rootSaga);

export const persistor = persistStore(store);

export type RootState = ReturnType<typeof store.getState>;

racineSaga.ts

import { all } from 'redux-saga/effects';
import { loginSaga, logoutSaga } from './auth/auth.saga';
// Dependency cycle via ../../store


export default function* rootSaga() {
  yield all([
    loginSaga(),
    logoutSaga(),    
  ]);
}

auth.saga.ts

import { persistor } from '../../store';
// Dependency cycle via ./sagas/rootSaga

const isAxiosError = (x: any): x is AxiosError => {
  return x.isAxiosError === true;
};
  
export function* logUserOut() {
  Cookies.remove('access_token');
  Cookies.remove('leisureManagementToken');
  localStorage.removeItem('persist:ea-root');

  yield call(persistor.purge);
  yield call(Router.push, '/login');
}

function* loginSaga() {
  yield takeLatest('auth/loginRequested', makeLoginRequest);
}

function* logoutSaga() {
  yield takeLatest('auth/logout', logUserOut);
}

export { logoutSaga };

Comme vous pouvez le voir, ce diagramme brut est le problème tel qu'il est :

Quelqu'un peut-il donner des conseils ici ? Merci