开发者问题收集

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

2022-02-28
743
javascript reactjs react-redux

我正在学习 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;

我对 React 还很陌生，所以我在这里有点困惑。任何帮助都将不胜感激！

完整错误： 

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
2个回答

第一个问题是您的导入 

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

正在进行默认导入，即 store 。您想要执行 

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

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

OFRBG
2022-02-28

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

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

创建一个名为 store.js 的文件，如下所示： 

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;
Mohammad Al Refaai
2022-02-28