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;

我的授权组件如下：

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 (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 (react-dom.development.js:11276:1)
    at discreteUpdates (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 @ 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 @ react-dom.development.js:11276
discreteUpdates @ 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 (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 (react-dom.development.js:11276:1)
    at discreteUpdates (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 @ 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 @ react-dom.development.js:11276
discreteUpdates @ 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 @ 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 @ react-dom.development.js:11276
discreteUpdates @ 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';

有关详细信息，请参阅：

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;

和身份验证组件：

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;

reduxjs/toolkit 错误 - 无法分派操作

Error with reduxjs/toolkit - cannot dispatch an action

javascript

reactjs

react-redux