जब मैं redux का उपयोग कर रहा था तो मुझे निम्न त्रुटि मिली:

TypeError: react__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function

Apa yang dilakukannya: Tentukan direktori root, fungsi mendapatkan semua file dalam direktori dari jenis yang diberikan (untuk kebutuhan waktu Anda, ubah files.add(...) agar sesuai dengan kriteria Anda)

dispatch() को नीचे दिए गए कंपोनेंट में कॉल किया जा रहा है

import authAction from "../store/Auth";
import { useDispatch } from "react-redux";
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));

export default function Header() {
  const classes = useStyles();
  const dispatch = useDispatch();
  console.log("Auth:", authAction);

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            Counter
          </Typography>
          <Button
            color="inherit"
            onClick={() => {
              dispatch(authAction.login());
            }}
          >
            Login
          </Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

creatSlice घटक:

import { createSlice } from "@reduxjs/toolkit";

const authSlice = createSlice({
  name: "Auth",
  initialState: { loggedIn: false },
  reducers: {
    login(state) {
      state.loggedIn = true;
    },
  },
});

export const authActions = authSlice.actions;

export default authSlice.reducer;

configureStore घटक:

import { configureStore } from "@reduxjs/toolkit";
import auth from "./Auth";

const store = configureStore({
  reducer: {
    auth: auth,
  },
});

export default store;

धन्यवाद।

1
Yoshiminea 12 सितंबर 2021, 08:18

1 उत्तर

सबसे बढ़िया उत्तर

मुद्दा

आपकी प्रामाणिक कार्रवाइयां आपके स्लाइस से डिफ़ॉल्ट निर्यात नहीं हैं:

export const authActions = authSlice.actions;

export default authSlice.reducer;

लेकिन आप उन्हें ऐसे आयात कर रहे हैं जैसे वे थे:

import authAction from "../store/Auth";

समाधान

नामित authActions निर्यात को सही ढंग से आयात करें:

import { authActions } from "../store/Auth";

और सही क्रिया निर्माता भेजें:

<Button
  color="inherit"
  onClick={() => {
    dispatch(authActions.login());
  }}
>
  Login
</Button>
0
Drew Reese 12 सितंबर 2021, 08:25