我是redux工具包的初学者。当我向我的应用程序添加一个切片时,我正在运行这个错误。this is the error in console
当我添加usersliceidents时,我遇到了这个问题。在此之前,当我添加vehiclesliceidents时,没有任何问题
root-reducee.ts
import { combineReducers } from "@reduxjs/toolkit";
import loaderSlice from "./slices/loaderSlice";
import vehicleSlice from "./slices/vehicleSlice";
import userSlice from "./slices/userSlice";
import snackbarSlice from "./slices/snackbarSlice";
import confirmAlertSlice from "./slices/confirmAlertSlice";
const rootReducer = combineReducers({
vehicle: vehicleSlice,
user: userSlice,
loader: loaderSlice,
snackbar: snackbarSlice,
confirm: confirmAlertSlice,
});
export default rootReducer;
userSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { AppThunk } from "../index";
import userService from "../../services/userService";
import { startLoading, stopLoading } from "./loaderSlice";
import { User } from "../../types/user";
import { PaginationMeta } from "../../types/pagination-meta";
import { showSnackbar } from "./snackbarSlice";
import { history } from "../../routes";
import routeConstants from "../../constants/route-constants";
export interface IUserListState {
userList: {
data: Array<User>;
meta: PaginationMeta;
errors: any;
message: any;
};
}
const initialState: IUserListState = {
userList: {
data: [],
meta: {
hasNext: true,
length: 0,
took: null,
total: 0,
},
errors: null,
message: null,
},
};
export const userSlice = createSlice({
name: "user",
initialState,
reducers: {
setUserList: (state: any, action: PayloadAction<IUserListState>) => {
state.userList = action.payload;
},
},
});
export const getUserList = (limit: number, offset: number, filter: Partial<User>, searchText : string): AppThunk => async (dispatch) => {
dispatch(startLoading());
const response = await userService().getUserList(limit, offset, filter, searchText);
if (response.data) {
dispatch(setUserList(response));
}
dispatch(stopLoading());
};
export const saveUser = (user: Partial<User>): AppThunk => async (dispatch) => {
dispatch(startLoading());
const response = await userService().saveUser(user);
if (response.data) {
dispatch(
showSnackbar({ snackbarMessage: "Saved", snackbarType: "success" })
);
history.push(`${routeConstants.USER}`);
}
dispatch(stopLoading());
};
const { actions, reducer } = userSlice;
export const { setUserList } = actions;
export default reducer;
我复制了以下切片(车辆)以创建上面的切片(用户)
vehicleSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { AppThunk } from "../index";
import vehicleService from "../../services/vehicleService";
import { startLoading, stopLoading } from "./loaderSlice";
import { Vehicle } from "../../types/vehicle";
import { PaginationMeta } from "../../types/pagination-meta";
import { showSnackbar } from "./snackbarSlice";
import { history } from "../../routes";
import routeConstants from "../../constants/route-constants";
export interface IVehicleListState {
vehicleList: {
data: Array<Vehicle>;
meta: PaginationMeta;
errors: any;
message: any;
};
}
const initialState: IVehicleListState = {
vehicleList: {
data: [],
meta: {
hasNext: true,
length: 0,
took: null,
total: 0,
},
errors: null,
message: null,
},
};
export const vehicleSlice = createSlice({
name: "vehicle",
initialState,
reducers: {
setVehicleList: (state: any, action: PayloadAction<IVehicleListState>) => {
state.vehicleList = action.payload;
},
},
});
export const getVehicleList = (limit: number, offset: number, filter: Partial<Vehicle>, searchText : string): AppThunk => async (dispatch) => {
dispatch(startLoading());
const response = await vehicleService().getVehicleList(limit, offset, filter, searchText);
if (response.data) {
dispatch(setVehicleList(response));
}
dispatch(stopLoading());
};
export const saveVehicle = (vehicle: Partial<Vehicle>): AppThunk => async (dispatch) => {
dispatch(startLoading());
const response = await vehicleService().saveVehicle(vehicle);
if (response.data) {
dispatch(
showSnackbar({ snackbarMessage: "Saved", snackbarType: "success" })
);
history.push(`${routeConstants.VEHICLE}`);
}
dispatch(stopLoading());
};
const { actions, reducer } = vehicleSlice;
export const { setVehicleList } = actions;
export default reducer;
snackbarSlice.ts
import { AlertColor } from "@material-ui/core";
import { createSlice } from "@reduxjs/toolkit";
export interface ISnackbarState {
showSnackbar: boolean;
snackbarMessage: string;
snackbarType: AlertColor;
}
const initialState: ISnackbarState = {
showSnackbar: false,
snackbarMessage: "",
snackbarType: "success",
};
export const snackbarSlice = createSlice({
name: "snackbar",
initialState,
reducers: {
showSnackbar: (state, action: any) => {
state.showSnackbar = true;
state.snackbarMessage = action.payload.snackbarMessage;
state.snackbarType = action.payload.snackbarType;
},
hideSnackbar: (state) => {
state.showSnackbar = false;
state.snackbarMessage = "";
state.snackbarType = "success";
},
},
});
export const { showSnackbar, hideSnackbar } = snackbarSlice.actions;
export default snackbarSlice.reducer;
loaderSlice.ts
import { createSlice } from "@reduxjs/toolkit";
export interface LoaderState {
isLoading: boolean;
}
const initialState: LoaderState = {
isLoading: false,
};
export const loaderSlice = createSlice({
name: "loader",
initialState,
reducers: {
startLoading: (state) => {
state.isLoading = true;
},
stopLoading: (state) => {
state.isLoading = false;
},
},
});
export const { startLoading, stopLoading } = loaderSlice.actions
export default loaderSlice.reducer
确认警报切片
import { createSlice } from "@reduxjs/toolkit";
import { ReactNode } from "react";
export interface IConfirmAlertState {
open: boolean;
title: string;
description?: string;
dialogueAction:ReactNode
}
const initialState: IConfirmAlertState = {
open: false,
title: "",
description: "",
dialogueAction:null
};
export const confirmAlertSlice = createSlice({
name: "confirm",
initialState,
reducers: {
showConfirm: (state, action: any) => {
state.open = true;
state.title = action.payload.title;
state.description = action.payload.description;
state.dialogueAction = action.payload.dialogueAction;
},
hideConfirm: (state) => {
state.open = false;
state.title = "";
state.description = "";
state.dialogueAction = null
},
},
});
export const { showConfirm, hideConfirm } = confirmAlertSlice.actions;
export default confirmAlertSlice.reducer;
2条答案
按热度按时间hmtdttj41#
上述错误意味着您正在使用
circular dependency issue
因为在
userSlice
初始化之前,其他一些slices
正在尝试访问您的userSlice
。您在
userSlice
中导入了一些其他的slices
,并且很可能在这些其他切片中循环导入了它们。然后,您需要找出文件导入周期所在的位置并进行更改。
在此阅读更多信息
pqwbnv8z2#
我今天遇到了同样的问题,这是来自桶文件(index.js)的问题