初始化前无法访问“userSlice”

Question

我是 redux 工具包的初学者。当我在我的应用程序中再添加一个 Slice 时，我遇到了这个错误。this is the error in console

我在添加 userSlice.ts 时遇到了这个问题。在那之前我添加vehicleSlice.ts没有问题

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;

Answer 1

上述错误表示您有一个circular dependency issue

因为其他一些slices 在初始化之前试图访问您的userSlice。

您在userSlice 中导入了其他一些slices，并且很可能在其他切片中，您循环导入了它们。

然后您需要弄清楚文件导入周期在哪里并进行更改。

阅读更多here