reactjs 初始化前无法访问“userSlice”

nwwlzxa7  于 2023-02-04  发布在  React
关注(0)|答案(2)|浏览(151)

我是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;
hmtdttj4

hmtdttj41#

上述错误意味着您正在使用circular dependency issue

因为在userSlice初始化之前,其他一些slices正在尝试访问您的userSlice
您在userSlice中导入了一些其他的slices,并且很可能在这些其他切片中循环导入了它们。
然后,您需要找出文件导入周期所在的位置并进行更改。

在此阅读更多信息

pqwbnv8z

pqwbnv8z2#

我今天遇到了同样的问题,这是来自桶文件(index.js)的问题

相关问题