当我使用redux时,我得到了以下错误:
TypeError: react__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function
我该如何解决这个问题?我已经添加了下面的代码。
正在下面的组件中调用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;
谢谢。
发布于 2021-09-12 05:25:35
问题
您的身份验证操作不是从您的切片中默认导出:
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>
https://stackoverflow.com/questions/69148664
复制相似问题