问题标签 [redux-middleware]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
7905 浏览

javascript - 如何以正确的顺序从 Redux 中间件调度操作

与世界上的应用程序一样,我的 React 应用程序需要对 API 执行一些 Ajax 调用。

我选择使用 Redux 中间件,以便正确地将 API 获取与我的组件分开。这个想法是从我的组件
中调度操作。REQUEST中间件监听它们并调度SUCCESSERROR操作:这些最后由减速器监听。

这里的很多人已经问过如何从 Redux 中间件发送操作:这不是我的问题的主题 :)

首先,让我向您展示一个我用来编写的简单 reducer:

以及相应的中间件:

很长一段时间都运行良好,然后我意识到它有一部分是错误的:我的中间件没有返回 的值next,所以它破坏了中间件链,这是错误的!
由于next(action);是我在中间件中执行的第一件事,所以我不能这么快就返回它,所以我把它移到了中间件的末尾。我还决定调度新的动作而不是使用next它们(毕竟,它们是新动作,将它们发送到整个中间件链确实有意义)。我的新中间件现在看起来像这样:

它看起来很棒,但我现在有另一个问题:因为store.dispatch是同步的,next(action)所以在之后调用。这意味着我的减速器在orREQUEST之后收到动作SUCCESSFAILURE:(

我认为一种解决方案可能是使用良好的旧承诺,而不是await

另一个想法是store.dispatch用 a包装setTimeout

老实说,我不是很喜欢这两种解决方案,它们感觉很hacky...

所以这是我的问题:我应该如何处理我的问题?有没有更干净的方法来做到这一点?

提前致谢 :)

0 投票
2 回答
2796 浏览

reactjs - Redux 存储在组件中变空

我在组件中获取 redux 存储时遇到问题。我正在使用 redux-react async 从 api 获取数据。我从 jsonplaceholder api 获得数据,但是在配置商店并将商店与根组件连接时遇到问题。我可以使用记录器和 redux 开发工具扩展来查看存储中的数据。

console.log(store.getState())在索引组件中做了,商店是空的:clientData: {}。我不知道我错过了什么,我需要一些提示。

//动作创建者

// 客户端数据缩减器

//rootreducer

//配置存储

//索引组件

//连接组件

在此处输入图像描述

0 投票
1 回答
294 浏览

reactjs - 我应该在哪里存储 Redux 中间件的本地状态?

我正在使用 Redux 来管理音乐播放器的逻辑。当它正在播放某些东西并突然失败时,我希望能够拦截该动作并让播放器重新开始,但只有n几次,因为如果问题不可恢复,我不想永远自动重试。

我认为中间件是实现这一点的好选择,但我想知道我是否应该在全局状态或本地中间件中存储已为某个项目完成的重试次数。

一个更普遍的问题是,一个 Redux 中间件是否应该包含任何本地状态,我的意思是,只有它关心的状态。

0 投票
2 回答
856 浏览

reactjs - TypeError: this.props.loginActionCreater 不是 react-redux 中的函数

我是 react redux 的新手,我试图在组件中调用两个操作。单击按钮后有登录页面我正在调用一个将获取 auth_token 的操作,然后我在 componentWillReceiveProps() 中使用的那个令牌用于调用另一个操作。下面是我的代码

问题:当我单击按钮时,它显示我在问题标题中提到的错误。

用户界面:

功能:

如果我只是分派单个动作,它工作正常,但在分派两个动作时,它显示标题中提到的错误。

这是我如何调度单个动作,它工作正常:

如果有人知道我做错了什么,请纠正我。感谢您的帮助!

0 投票
1 回答
2131 浏览

javascript - 如何在不中断异步流的情况下自动刷新 redux 中的 JWT?

高级描述

我有一个使用 Google Oauth 的 React/redux/electron 应用程序。我希望能够在访问令牌过期时自动刷新它。我已经对此进行了研究并使用中间件成功地解决了它,但我的解决方案在某些情况下会出错。

我已经实现了一个在每个 API 操作上运行的刷新中间件。它检查访问令牌是否已过期或即将过期。如果是这样,它不会分派它收到的操作,而是分派一个令牌刷新操作并将任何其他操作排队,直到收到新的访问令牌。之后,它调度其队列中的所有操作。

但是,我的一位动作创建者看起来像这样:

当由于令牌未过期而导致刷新中间件未运行时,threads.payload将在此处定义,并且一切都将按预期工作。

但是,当刷新中间件确实运行时,threads.payload将是undefined因为dispatch似乎使用令牌刷新动作的值而不是fetchThreads动作来解析。

如何确保令牌被刷新(并在state/中更新localStorage),fetchThreads与更新的令牌一起分派,并且threads变量被分配给正确 Promise 的解析值?

项目代码链接

这是我的刷新中间件。它的灵感来自kmmbvnr这篇文章

这是令牌刷新操作创建者

这是我的 queryThreads 动作创建器中的行,当令牌必须刷新时抛出(threads.payloadis undefined)。

这是我更新状态以响应令牌刷新的减速器。

这是我更新 localStorage以响应令牌刷新的中间件。

0 投票
1 回答
2535 浏览

javascript - Jest spyOn() 调用实际函数而不是模拟函数

我正在测试apiMiddleware调用它的辅助函数callApi。为了防止实际调用callApi将发出 API 调用,我模拟了该函数。但是,它仍然会被调用。

apiMiddleware.js

apiMiddleware.spec.js

请忽略动作的属性和函数的参数callApi。我不认为他们是我试图提出的问题的关注点。

告诉我您是否需要进一步说明。

0 投票
1 回答
326 浏览

javascript - 为什么 redux-loop 操作会跳过所有中间件?

我运行redux-loop 官方示例,稍作改动:

  1. 而不是fetch我使用超时的承诺。
  2. 我添加了日志中间件(来自 redux.js.org 教程的复制粘贴)。

副作用功能:

行动:

初始状态:

减速器:

我的自定义日志中间件:

配置商店:

调度第一个动作以开始这一切:(我的代码)

输出:

在此处输入图像描述


如您所见,第二个操作跳过了我的日志中间件,而且日志的最后一行我也不清楚。为什么 reducer 接收的是一个函数而不是实际的用户对象?

0 投票
0 回答
24 浏览

redux - 使用中间件时属性“类型”的redux错误

我正在尝试使用 applyMiddleware api 在我的 redux 应用程序中集成一个记录器,但是当我触发一个操作时,我收到了这个错误:

动作可能没有未定义的“类型”属性。你有没有拼错一个常数?

这很奇怪,因为我所有的动作创建者都以这种格式返回对象: { type : ..., payload : {...}}. 而且,在浏览器的控制台中,打印的对象具有“类型”属性。

我以这种方式设置商店:

我被困。

0 投票
1 回答
105 浏览

javascript - 在中间件中调度 redux 操作会导致意外行为

我试图了解 redux 中间件是如何工作的,在我的实验过程中,我注意到从 redux 中间件分派一个动作可能会导致意外行为。

我将尝试通过模拟文件上传来解释问题,如下所示:

我们有 3 个动作:

计算总数的中间件:

减速器:

这是模拟文件上传的代码:

以下是事件的顺序:

第一个动作按预期工作并设置进度值:

在此处输入图像描述

问题从这里开始;缩略图假设由“setThumbnail”设置,但 devtools 显示它已由“calculateTotal”设置,之后的每个调度都不匹配:

在此处输入图像描述

我在这里做错了什么?是设计使然吗?如何在不引起上述问题的情况下在中间件中调度操作?

0 投票
1 回答
842 浏览

javascript - 访问 localStorage 而不是 redux-store 的简单方法

我刚刚将一些东西从我的商店导出到 localStorage(实际登录用户),因此用户应该能够打开第二个选项卡而无需再次登录。

为了将数据放入 localStorage,我使用了 Redux-Middleware(如果操作是登录,我将登录数据放入 localStorage)。

现在我的问题是:有没有一种简单的方法可以从 localStorage 获取数据?就像我调用 localStorage.getItem 而不是从 redux 存储返回值的读取中间件?

或者我是否必须更改使用登录数据访问 localStorage 而不是 redux 存储的每个组件。

现在我通过 mapStateToProps 方法访问令牌。