我在react项目中升级一些包的时候,正在重构一些相对较旧的代码。导入代码的组织和格式由prettier
处理。
在重构的几分钟后,我遇到了Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
。在做了一些挖掘之后,我发现在其中一个文件中,导入顺序是问题所在。
这是出错前的导入订单
import { RootState, useAppDispatch } from '../../../redux/store';
import { logoutAsyncThunk } from '../../../redux/authentication';
这是发生错误后的导入顺序
import { logoutAsyncThunk } from '../../../redux/authentication';
import { RootState, useAppDispatch } from '../../../redux/store';
虽然我想在保存文件时组织导入,但恢复到以前的导入顺序是可行的。
源代码/redux/存储.ts
import { configureStore } from '@reduxjs/toolkit';
import { useDispatch } from 'react-redux';
import authenticationReducer from './authentication';
const store = configureStore({
reducer: {
authentication: authenticationReducer,
// other reducers...
},
devTools: true,
middleware: getDefaultMiddleware =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [
'authentication/logoutAsyncThunk/fulfilled',
],
},
}),
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();
export default store;
sc/redux/身份验证.ts
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { AxiosResponse } from 'axios';
import { logout } from '../services/api';
import { IAuthenticationInitialState } from './types';
export const logoutAsyncThunk = createAsyncThunk<AxiosResponse>(
'authentication/logoutAsyncThunk',
async () => await logout(),
);
export const initialState: IAuthenticationInitialState = {
token: {},
initialAuthenticationCheck: false,
};
const authenticationSlice = createSlice<IAuthenticationInitialState, {}, 'authentication'>({
name: 'authentication',
initialState,
reducers: {},
extraReducers: builder =>
builder.addCase(logoutAsyncThunk.fulfilled, state => {
state.authenticatedUser = undefined;
state.token = {};
state.decodedTokenInfo = undefined;
window.location.assign('/');
}),
});
export default authenticationSlice.reducer;
1条答案
按热度按时间tjrkku2a1#
我认为问题其实很简单您所需要做的就是遍历一些包含redux服务的代码,并查看是否有一个reducer在其初始化之前被使用,或者是否一切正常;可能你需要在你的eslint配置中使用
import-sorts-order
规则,这样当你保存它的时候,它会自动优化导入。你这里遇到的问题叫做circular-dependecy-issue
。