问题标签 [redux-thunk]

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 回答
3935 浏览

javascript - 从redux中的reducer获取ID

我还很新,正在尝试使用 react 和 redux 构建一个简单的书签应用程序。

我无法解决这个问题:

用户可以创建一个书签并将其添加到多个文件夹中。所以我调度了一个addMark(bookmark)动作,然后addMark(folder)或者editFolder(folder)如果文件夹已经存在。如您所见,书签和文件夹是通过相同的操作添加的,因为在我的状态树中它们都只是标记- 由它们的 type 属性区分。

我的问题:如何告诉文件夹对象哪个是要添加到书签文件夹列表的新书签?如何在两次调度之间检索新创建的书签的 ID?

我不满意的解决方案:

  1. 我知道如何在 reducer 中生成书签 ID(通过Math.max现有的书签 ID),所以我可以在两次调度之间重现新的书签 ID。这听起来像是一个糟糕的 hack。
  2. 书签和文件夹保存在同一个状态分支(同一个减速器)中,因为它们都只是“标记”,我可以拥有一个引用最新添加的书签的状态属性,但这听起来也很糟糕。

一点源代码,以了解我所拥有的:

而在 AddMark 里面,也就是容器组件:

我找不到令人满意的解决方案。

0 投票
1 回答
3910 浏览

redux - redux reducer vs action

关于减速器与动作的新手问题。来自 redux 文档

动作描述了某事发生的事实,但不指定应用程序的状态如何变化作为响应。

给定相同的参数,reducer 应该计算下一个状态并返回它。没有惊喜。无副作用。没有 API 调用。没有突变。只是一个计算。

因此,如果我们考虑以下场景:

  1. 用户可以在地图上放置点并获取这些点之间的路线。
  2. 当用户第一次点击地图时,这是他的起点。当他第二次点击时——这就是他的终点。随后的单击在前一个点和结束位置之间添加点。
  3. 添加每个点后(第一个除外),必须计算新点和前一个点之间的路线。因此,如果我有 S -> A -> F 并添加点 B (S -> A -> B -> F) 必须计算两条路线 A -> B 和 B -> F

所以我们在添加任何 3+ 点时会有两个副作用:

  • 新点不在列表末尾
  • 新路线必须计算到终点。

如果我将我的点结构建模为:

我在 Actions 中执行项目位置计算和路线检索是否正确,例如:

对我来说,这在某种程度上与“但不指定应用程序的状态如何变化”相矛盾——因为从动作中我指定了在哪里插入我的新点。
我可以计算减速器中的插入位置,但是如何获取终点的路线数据?
这里的正确方法是什么?

0 投票
2 回答
612 浏览

javascript - 不影响状态的 Redux 应用业务逻辑?

我有一个应用程序,它利用 Oauth2 “重定向流”来验证用户,即用户被重定向到另一个网站登录,然后被重定向回我的网站。

文档和其他来源似乎都声称业务逻辑应该放在动作创建者或减速器中。但是我有一个login()不会以任何方式改变状态的函数,它的作用是将应用程序的当前状态保存为 localStorage 中的普通对象,然后将用户重定向到授权服务器。当用户登录并被重定向回来时,状态被恢复(通过另一段代码)并作为初始状态提供给我的商店创建函数。

我的问题:函数的逻辑login只是检索状态,但不会以任何方式更改它,因此它不属于减速器。它也不返回作为动作创建者定义的动作。我应该把它放在我的应用程序结构的什么位置?

拥有一个实际上不创建动作的动作创建者是否“可以”?我现在正在使用 redux-thunk 执行此操作(因为我需要这样做getState())并且它可以正常工作,但感觉不对,因为它实际上不是“动作创建者”,另一方面我也有一个logout()确实返回的函数一个动作,所以感觉他们应该住在同一个地方。我想这是一种极端情况,但并不是因为我可以想到很多理由以这种方式保存状态并将访问者重定向到其他站点(或者甚至只是保存状态而不重定向)。

PS。我知道有一些库可以自动将我的 redux 存储与 localStorage 同步,但这并不是问题的重点。

编辑:一些澄清:

Redux 文档中关于将业务逻辑放在何处:对于 归约器或动作创建器中应该放置哪些逻辑,没有一个明确的答案。

继续阅读,很明显只有两个地方我应该放置业务逻辑,要么在 reducer 要么在 action creator 中。现在,由于我想做的事情不会影响状态,并且根据定义,reducer 会影响状态,所以我倾向于将此逻辑放入动作创建器中。

关于动作创建者的文档:动作创建者就是这样——创建动作的函数。将术语“动作”和“动作创建者”混为一谈很容易,因此请尽量使用正确的术语。[...] 在 Redux 中,动作创建者只需返回一个动作

动作文档:动作是纯 JavaScript 对象。

我的登录示例的伪代码:

这段代码显然在动作创建者中没有位置,因为我没有返回动作,这是动作创建者的目的。但是我仍然需要检索状态,所以我也不能让它完全独立。

再说一遍,问题是我应该将这段代码放在我的应用程序结构中的什么位置?

同样,代码可以正常工作,一切都很好,所以我想这更像是一个学术问题,但它让我很烦恼,因为我在这里显然违反了 Redux 的基本规则。也许这只是一个例外?

0 投票
2 回答
718 浏览

redux - 将 redux-loop 与 thunk 动作创建者一起使用

我正在使用 redux-loop 从我的减速器中调用动作创建者。这通常工作得很好。

但是,我也在为我的一些动作创建者使用 thunk。如果我采用常规动作创建器并将其转换为 thunk,则它不再可用于 redux-loop。

有没有办法从 reducer 中的 redux-loop 调用 thunk?

0 投票
1 回答
317 浏览

redux - 无法理解 Redux-thunk 中间件

全部:

当我尝试遵循有关异步操作的教程http://redux.js.org/docs/advanced/AsyncActions.html时,我对 Redux 还是很陌生

有一个叫做 thunk 的概念,我不太明白为什么我们需要一个 thunk 来执行异步操作,为什么我们不能简单地调度 init 信号,然后从 fetch data 中获取数据,然后在 promise 中调度完成信号?

谢谢

0 投票
1 回答
206 浏览

ajax - Redux action ajax 结果未发送到 reducer

我刚刚开始尝试 Redux,我知道中间件对于进行 ajax 调用是必不可少的。我已经分别安装了 redux-thunk 和 axios 包,并尝试将我的结果作为状态挂钩并将 ajax 结果呈现给我的组件。但是,我的浏览器控制台显示错误,并且我的减速器无法获取有效负载。

错误:

未捕获的错误:操作必须是普通对象。使用自定义中间件进行异步操作。

这是我的代码的一部分以及如何连接中间件:

我的行动:

减速器:

您可以看到状态routes的大小为 0,但操作有效负载的数组为 3。

我最近的动作

非常感谢任何帮助,谢谢。

0 投票
1 回答
404 浏览

javascript - redux-thunk 获取解析响应

我是 redux 和 reactjs 的新手,我正在尝试将一些服务器端数据提取到我的代码中。

这是我的 thunk 获取:

这是我在控制台中看到的:

在此处输入图像描述

在提琴手中,我看到响应是预期的“成功”。

这个响应是否有效以及如何解析它,我有点困惑,网上的信息很少。

编辑

我改为:

我收到了对象。现在,当我发送一个复杂类型(列表)时,我看到如下:

在此处输入图像描述

0 投票
2 回答
6898 浏览

javascript - Redux thunk:如何等待异步操作的完成

由于 redux thunk 异步调用动作创建者返回的函数,我如何确保在调用动作创建者之后 redux 在继续之前已经实际调度了动作?

我需要在对服务器的每个 POST 请求之前获取 CSRF 令牌,并且对于这两个过程都有相应的操作。

问题是,如果我连续调用这些动作创建者,POST 动作由于某种原因在 CSRF 动作被调度之前被调度。我想将这些问题分开,所以我不想合并这些操作。

如何将动作创建者调用代码与调度这些动作的 redux thunk 同步?

0 投票
1 回答
1387 浏览

javascript - 为什么 fetch() 超过最大调用堆栈?

这实际上是来自redux-thunk示例的代码:

这是我正在使用的:

如果你“运行代码片段”,你会得到错误:

未捕获的 RangeError:超出最大调用堆栈大小

我也尝试过不同的链接。

0 投票
1 回答
651 浏览

reactjs - Redux:与 DOM 交互的位置,由操作触发,但在 React 应用程序之外发生变化

我有一个 React/Redux 应用程序,它负责处理实时销售(拍卖)的交互式项目列表。我<div id='app'></div>只负责列表。

问题是何时出售商品,我需要将其添加到另一个列表中,该列表不在 React 应用程序中。由于列表是在服务器上呈现的,因此唯一需要的交互就是添加那些已售出的物品。

现在我正在做这样的事情

我想知道这是否是正确的地方,还是我应该把它放在其他地方?