问题：

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

邓俊英

2023-03-14

我正在学习反应，特别是本节的reactjs/工具包，并通过一些基本示例来帮助自己了解我在哪里假装有人登录他们的帐户。我理解我的错误问题，但我不知道如何解决它。据我所知，我的代码是完全正确的，因为我之前的示例遵循了完全相同的模式。问题来自我的AuthSlice导入时。在源文件中，它可以访问AuthSlice. action.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

共有2个答案

许博易

2023-03-14

使用减速器设置操作是不好的做法，您必须创建一个名为Action. 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;

云弘壮

2023-03-14

第一个问题是您的导入

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

正在进行默认导入，即< code >存储区。你想做什么

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

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

类似资料：

react.js - React 的 reduxjs/toolkit 在 typescript 报错的原因？

报错：TS2322: Type any is not assignable to type never 调用端我不太明白 never 什么意思我给的不是字符么很明显的
操作系统调度算法

操作系统使用各种算法来有效地调度处理器上的进程。调度算法的目的最大CPU利用率公平分配CPU 最大吞吐量最短周转时间最短的等待时间最短响应时间有以下算法可用于计划作业。 1. 先来先服务这是最简单的算法。最短到达时间的过程将首先获得CPU。到达时间越少，进程得到CPU的速度越快。这是非抢先式的调度。 2. 轮循在循环调度算法中，操作系统定义了一个时间片(片)。所有的进程将
javascript - reduxjs/toolkit 刷新页面后如不丢失 store 中的数据？

reduxjs/toolkit刷新页面后，store 中的数据丢失怎么办？我想放到 localstorage 中，获取的时候，判断对象是否存在，不存在就把值给 state，结果 state 不让复制，但是直接返回缓存，就失去了响应式，这该咋解决？网上有说 redux-persist，但是这个比较老，都是 redux 的例子，大家都是怎么解决的？
安装AWS Toolkit for Eclipse时出错

我无法为Eclipse安装AWS工具包。我不明白如何下载，这个“bundle org.eclipse.core.variables 3.2.800”是什么，消息末尾的依赖关系是什么？这是一个错误：无法完成安装，因为找不到一个或多个必需的项目。当前安装的软件：AWS Toolkit for Eclipse Core（必需）2.3.1.V201707121824（com.amazonaws.Ecli
操作系统FCFS调度

主要内容：以下是纠正/补充内容：先来先服务(FCFS)调度算法根据其到达时间简单地调度作业。就绪队列中第一个工作将首先获得CPU。工作到达时间越少，工作得到的CPU就越快。如果第一个进程的突发时间是所有作业中最长的，则FCFS调度可能会导致饥饿问题。 FCFS的优势简单容易先到先得 FCFS的缺点调度方法是非抢先式的，该进程将运行到完成。由于算法的非抢先性，可能会出现饥饿问题。尽管实现起来很容易，但由于平均等待
操作系统CPU调度

主要内容：进程控制块中保存了什么？,为什么需要调度？在像MS DOS这样的单编程系统中，当进程等待任何I/O操作完成时，CPU仍然是空闲的。这是一个开销，因为它浪费时间并导致饥饿问题。但是，在多程序系统中，CPU在进程的等待时间内不会保持空闲状态，而是开始执行其他进程。操作系统必须定义CPU将被给予哪个进程。在多程序系统中，操作系统调度CPU上的进程以获得最大的利用率，此过程称为CPU调度。操作系统使用各种调度算法来调度过程。这是短期调
Spring调度器无法正常工作

计划程序的设置：和@enableScheduling在类中使用@configuration。问题是fixedDelay正确工作两次，然后在迭代之间暂停1.5分钟。我在计划注释中尝试过fixedRate或cron，但都没有帮助。方法在调度任务中的工作时间为100ms，项目有足够的内存，但调度程序的工作速度很慢。
错误：操作无法完成。（LaunchServicesError错误0。）

当我运行模拟器时,以下错误显示为警报：操作无法完成。（LaunchServicesError错误0。）我试过很多关于堆栈溢出的答案，但它们对我都不起作用。 Feb 18 14:48:12 com.apple.dt.xcode[32825]:错误域=LaunchServicesError Code=0“（null）”userInfo={Error=MissingBundleExecutable,

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

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档