reduxjs/toolkit出错-无法调度操作

Question

我正在学习react，特别是本节的reactjs/toolkit，并通过一些基本的例子来帮助自己了解我在哪里伪造某人登录他们的帐户。我理解我的错误问题，但我不知道如何解决它。据我所知，我的代码是完全正确的，因为我以前的例子遵循了完全相同的模式。导入时，问题来自我的authSlice。在源文件中，它可以访问authSlice.actions.login等，但导入后就不能了。无论出于何种原因，它都不会注册login((｛｝或logout(({｝。因此，当我将表单附加到提交处理程序时，会引发此错误。我认为这就是问题所在，因为当我控制台记录操作时，我看不到我的登录或注销操作。我也可能错了，但我会在的末尾附上实际错误

我把我的商店放在一个单独的文件中，如下所示：

const intialAuthState = {
isAuthenticated: false
};
const authSlice = createSlice({
name: 'authentication',
initialState: intialAuthState,
reducers: {
login(state) {
state.isAuthenticated = true;
},
logout(state) {
state.isAuthenticated = false;
},
},
});
const store = configureStore({
reducer: {counter: counterSlice.reducer, auth: authSlice.reducer}
});
export const authActions = authSlice.actions;
export default store;

我的auth组件如下：

import { useDispatch} from 'react-redux';
import classes from './Auth.module.css';
import authActions from '../store/index';
const Auth = () => {
const dispatch = useDispatch();
console.log(authActions);
const loginHandler = (event) => {
event.preventDefault();
dispatch(authActions.login());
};
return (
<main className={classes.auth}>
<section>
<form onSubmit={loginHandler}>
<div className={classes.control}>
<label htmlFor='email'>Email</label>
<input type='email' id='email' />
</div>
<div className={classes.control}>
<label htmlFor='password'>Password</label>
<input type='password' id='password' />
</div>
<button>Login</button>
</form>
</section>
</main>
);
};
export default Auth;

我是个新手，所以在这里我有点困惑。如有任何帮助，我们将不胜感激！

完全错误：

Auth.js:13 Uncaught TypeError: _store_index__WEBPACK_IMPORTED_MODULE_2__.default.login is not a function
at loginHandler (Auth.js:13:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
at executeDispatch (react-dom.development.js:8243:1)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1)
at processDispatchQueue (react-dom.development.js:8288:1)
at dispatchEventsForPlugins (react-dom.development.js:8299:1)
at react-dom.development.js:8508:1
at batchedEventUpdates$1 (react-dom.development.js:22396:1)
at batchedEventUpdates (react-dom.development.js:3745:1)
at dispatchEventForPluginEventSystem (react-dom.development.js:8507:1)
at attemptToDispatchEvent (react-dom.development.js:6005:1)
at dispatchEvent (react-dom.development.js:5924:1)
at unstable_runWithPriority (scheduler.development.js:468:1)
at runWithPriority$1 (react-dom.development.js:11276:1)
at discreteUpdates$1 (react-dom.development.js:22413:1)
at discreteUpdates (react-dom.development.js:3756:1)
at dispatchDiscreteEvent (react-dom.development.js:5889:1)
loginHandler @ Auth.js:13
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
react-dom.development.js:4091 Uncaught TypeError: _store_index__WEBPACK_IMPORTED_MODULE_2__.default.login is not a function
at loginHandler (Auth.js:13:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
at executeDispatch (react-dom.development.js:8243:1)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1)
at processDispatchQueue (react-dom.development.js:8288:1)
at dispatchEventsForPlugins (react-dom.development.js:8299:1)
at react-dom.development.js:8508:1
at batchedEventUpdates$1 (react-dom.development.js:22396:1)
at batchedEventUpdates (react-dom.development.js:3745:1)
at dispatchEventForPluginEventSystem (react-dom.development.js:8507:1)
at attemptToDispatchEvent (react-dom.development.js:6005:1)
at dispatchEvent (react-dom.development.js:5924:1)
at unstable_runWithPriority (scheduler.development.js:468:1)
at runWithPriority$1 (react-dom.development.js:11276:1)
at discreteUpdates$1 (react-dom.development.js:22413:1)
at discreteUpdates (react-dom.development.js:3756:1)
at dispatchDiscreteEvent (react-dom.development.js:5889:1)
loginHandler @ Auth.js:13
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
VM925:2 Uncaught ReferenceError: process is not defined
at Object.4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at Object.8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at Object.8641 (<anonymous>:2:1379)
at r (<anonymous>:2:306599)
at <anonymous>:2:315627
at <anonymous>:2:324225
at <anonymous>:2:324229
at HTMLIFrameElement.e.onload (index.js:1:1)
4043 @ VM925:2
r @ VM925:2
8048 @ VM925:2
r @ VM925:2
8641 @ VM925:2
r @ VM925:2
(anonymous) @ VM925:2
(anonymous) @ VM925:2
(anonymous) @ VM925:2
e.onload @ index.js:1
be @ index.js:1
(anonymous) @ index.js:1
(anonymous) @ index.js:1
load (async)
be @ index.js:1
(anonymous) @ index.js:1
(anonymous) @ index.js:1
Promise.then (async)
(anonymous) @ index.js:1
(anonymous) @ index.js:1
t @ index.js:1
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
error (async)
o @ index.js:1
(anonymous) @ index.js:1
ge @ index.js:1
./node_modules/react-dev-utils/webpackHotDevClient.js @ webpackHotDevClient.js:45
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ index.js:56
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1

Answer 1

第一个问题是您的导入

import authActions from '../store/index';

正在执行默认导入，即store。你想做

import { authActions } from '../store/index';

---

有关更多信息，请参阅：如何从ES6模块导入默认和命名

Answer 2

用reducer设置操作是不好的做法您必须创建一个名为Actions.js的文件，您可以将函数声明为操作并导出它们。还可以为创建一个名称为store.js的文件

const store = configureStore({
reducer: {counter: counterSlice.reducer, auth: authSlice.reducer}
});

这样做吗：

const intialAuthState = {
isAuthenticated: false
};
const authSlice = createSlice({
name: 'authentication',
initialState: intialAuthState,
reducers: {
login(state) {
state.isAuthenticated = true;
},
logout(state) {
state.isAuthenticated = false;
},
},
});
const store = configureStore({
reducer: {counter: counterSlice.reducer, auth: authSlice.reducer}
});
export const authActions = authSlice.actions;
export store;

和Auth组件：

import { useDispatch} from 'react-redux';
import classes from './Auth.module.css';
import {authActions} from '../store/index';
const Auth = () => {
const dispatch = useDispatch();
console.log(authActions);
const loginHandler = (event) => {
event.preventDefault();
dispatch(authActions.login());
};
return (
<main className={classes.auth}>
<section>
<form onSubmit={loginHandler}>
<div className={classes.control}>
<label htmlFor='email'>Email</label>
<input type='email' id='email' />
</div>
<div className={classes.control}>
<label htmlFor='password'>Password</label>
<input type='password' id='password' />
</div>
<button>Login</button>
</form>
</section>
</main>
);
};
export default Auth;