问题标签 [redux-promise]

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 投票
1 回答
1539 浏览

react-router - Redux 在使用 react-router 'history.push' 导航到另一个页面时丢失状态

(你可以看到我的声誉不是很高:) 我知道如果你不喜欢我的问题,这将是我的最后一个问题,因此我会尽可能地写它:)

我面临的问题类似于:

Redux 在导航到另一个页面时丢失状态

但是,上述问题的答案是使用“history.push”,这就是我正在做的事情,但我仍然遇到问题。

我在用:

  • “反应”:“^16.0.0”
  • “反应减少”:“^5.0.6”
  • “反应路由器”:“^4.2.0”
  • “反应路由器 dom”:“^4.2.2”
  • “还原”:“^3.7.2”
  • "redux-promise":"^0.5.3"
  • “axios”:“^0.17.1”

我正在执行以下操作:

  1. 在反应组件“SearchText”中,获取文本字符串并调用动作创建者
  2. 在 action creator 中,使用文本字符串向 goodreads.com 发送 HTTP 请求
  3. 在我的 reducer 中,使用 action payload 设置 redux 状态
  4. 使用另一个组件“BookResults”(在另一个路由中)来显示此状态

组件“SearchText”有一个指向“BookResults”页面的链接。因此,一旦“SearchText”触发动作创建者,如果(当我在控制台上看到收到结果并且状态设置为书籍列表时)我单击路由到“BookResults”的链接,我看到书籍清单。

但是,如果“SearchText”使用(在触发动作创建者时)执行新页面的 history.push 的回调,并且此回调由 'axios(xxx).then' 调用,则状态设置不正确,尽管我在控制台中看到 HTTP 请求成功。

我相信你可以看到我做错了什么(我希望它不是很愚蠢)......请告诉我。

这是代码:

index.js

SearchText 组件

BookResults 组件

图书组件

动作/index.js

如下所示,以下行被注释掉:

如果我包括它,我有问题。

减速器/index.js

减速机

0 投票
1 回答
387 浏览

reactjs - 为什么 API 请求在 reducer 的操作值中返回 [object Object]?

我正在尝试使用 Giphy API、redux 和 axios 制作一个搜索应用程序,但我认为我在 API 请求中从 API 获取所有搜索结果的地方出错了。

我使用一个动作发出 API 请求,该动作被减速器捕获,但是当我控制台记录减速器内的动作值时,我得到 [object Object] 而不是实际对象。为什么是这样?

我使用 ReduxPromise 作为我的中间件。

这是我在操作代码中的 API 请求:

和减速机:

和我的主要 index.js,我的中间件在哪里

0 投票
1 回答
1350 浏览

javascript - 访问作为对象的 reducer 有效负载的元素

这是一个基本的天气应用程序,我正在做它来学习 Redux。API 没有提供搜索的城市名称,所以我必须通过 Redux 传递它。

我有以下容器:

this.props.weather.data.map 抛出“无法读取未定义的属性映射”的错误。

提供“天气”状态的减速器是:

最后是相关的动作创建者:

您可以从注释掉的代码中看到,如果我只传递一个数组进行迭代,我就可以让它工作。但我需要传递更多信息才能获得一个人搜索的城市名称。我可以做些什么来读取状态对象的第一个元素,数组,并摆脱未定义的错误?

非常感谢您的任何想法!

0 投票
2 回答
1301 浏览

javascript - Redux-Thunk - 异步动作创建者承诺和链接不起作用

我正在尝试调度一个动作。我找到了一些操作的工作示例,但没有我的那么复杂。

你能给我一个提示吗?我究竟做错了什么?

我正在使用 TypeScript,最近删除了所有类型并尽可能简化了我的代码。

我正在使用 redux-thunk 和 redux-promise,如下所示:

组件 - Foo 组件:

动作 - actionFoo:

行动 - AuthCall:

动作 - ApiCall:

0 投票
1 回答
104 浏览

redux - React-redux 项目 - 链式依赖异步调用不适用于 redux-promise 中间件?

我是使用 redux 的新手,我正在尝试将 redux-promise 设置为中间件。我有这种情况,我似乎无法开始工作(当我只是想在没有链接的情况下进行一次异步调用时,事情对我有用)

假设我有两个 API 调用:

我需要调用第一个,并获取一个项目,然后获取所有标签,然后返回一个包含项目和与该项目相关的标签的对象。

现在,我的动作创建者是这样的:

我在toItemDetails中有一个console.log,我可以看到当调用完成后,我们最终进入toItemDetails并得到正确的信息。但是,看起来我们在调用完成之前就到达了减速器,而我只是从减速器获得了一个未定义的有效负载(它不会再试一次)。对于这种情况,reducer 只是试图返回 action.payload。

我知道链接调用不是很好,但我至少希望看到它工作。这是可以通过 redux-promise 完成的吗?如果没有,任何有关如何实现此功能的示例将不胜感激!

0 投票
1 回答
1160 浏览

javascript - 使用 redux-thunk 会产生未定义的错误,而 Promise 工作得很好

这是我的减速器:

这是我的飞行容器:

redux-thunk我尝试运行我的应用程序时使用后,我收到以下错误:

未捕获的类型错误:无法读取未定义的属性“数据”

我试图找出造成这种情况的原因,如果在我的减速器上我更改[action.payload.data][action.payload]然后我得到错误:

未捕获的类型错误:无法读取未定义的属性“长度”

这是我的 src/index.js:

但无论我总是得到一个 JSON 文件,其中包含我需要的所有信息,并且在我的容器中,我尝试以表格格式发布它们。我不明白是什么原因造成的。有没有办法在不将我的源文件更改为以前的文件的情况下解决这个问题?

更新

0 投票
2 回答
4601 浏览

reactjs - React Redux Action Payload 返回未定义

我正在尝试将我的个人资料状态转换为 redux。表单和动作都正常工作,但动作的有效负载在到达减速器时是未定义的。很确定这是一个菜鸟的错误,但我一辈子都看不到它。

我按照 Stephen Grider 的 udemy 课程作为模板,并让他的帖子部分使用与登录完全相同的模式工作。redux-promise 在中间件中正确连接。

package.json(部分)

登录组件:

动作简介

减速机型材

0 投票
1 回答
454 浏览

reactjs - Redux-Promise 不会阻止被拒绝的 Promise

Redux-Promise说: 如果它收到一个 Promise,它会派发这个 Promise 的解析值。如果 Promise 被拒绝,它不会发送任何东西。

但是当我运行下面的代码并故意做一些事情来让承诺在行动中被拒绝时,我在reducer上也得到了被拒绝的承诺!它不应该被发送到减速器吗?请不要只告诉我解决方法,而是告诉我当 Redux-Promise 这么说时为什么会发生这种情况。

行动:

答案^是: 在此处输入图像描述

减速器:

action.payload ^ 是:

在此处输入图像描述

0 投票
0 回答
921 浏览

reactjs - Typescript 2.8 条件类型和 redux 中间件

我使用typescript的 ReturnType 功能找到了关于类型安全 redux 的很棒的解决方案,这是 2.8 版的新功能。

动作/types.ts

模型/用户.ts

动作/index.ts

在进入 reducer 之前,我使用的是redux-promise包,它是 redux 的中间件来处理异步调度。简单地说,如果 payload 是 Promise,那么redux-promise将解析该 Promise 并将 payload 值更改为 Promise 的结果。

这是问题所在。我想在写reducer 代码的时候使用ActionUnion类型。但是打字稿不知道承诺已经被中间件解决了。非异步操作效果很好,因为中间件不会更改有效负载。

user_reducer.ts

这不是错误。这很明显,因为我定义了action: fromActions.Action,所以打字稿会认为“哦,action 参数的类型是 asyncAction 函数的 ReturnValue 并且它有 promise 对象作为有效负载值。”。

我认为有两种解决方案。

1.旧式

在 2.8 之前,我们通常会定义每个 ActionCreator 的接口并将它们联合起来。

它可以解决中间件问题,但是如果我更改动作创建函数的返回值,那么我必须手动更改匹配的接口。(这就是为什么新的ReturnValue功能很棒的原因。)

2.重新定义Action类型

而不是使用,

让我们定义具有承诺作为有效负载值的 Action 类型。比方说 ActionWithPromisePayload。下面是伪代码。我不擅长打字。(T_T)

ActionWithPromisePayload用于检查操作对象的有效负载是否具有承诺。 ActionWithPromiseResolvedPayload用于重新定义动作类型,因为承诺由中间件解决。

然后,使用2.8 中新增的条件类型重新定义类型Actions 。

如果Action 有promise 对象作为payload,那么它的真实类型不是action 的ReturnValue,而是resolved 的类型。下面是伪代码。

问题有点乱,但关键问题是,我怎样才能很好地定义减速器的动作参数类型并与中间件一起工作?

如果有更好的方法,那么不要关心我的解决方案。谢谢。

参考。https://medium.com/@martin_hotell/improved-redux-type-safety-with-typescript-2-8-2c11a8062575

0 投票
2 回答
907 浏览

javascript - React + Redux + Axios 在创建动作后不加载组件

我正在尝试使用我创建的 API,我遵循了我之前使用过的代码,但是当加载组件时,由于 json 列表为空,它显示为空列表,我可以在日志中看到列表之后正在加载,但组件上没有刷新或任何内容。我尝试添加一个验证,即如果列表的长度为 cero,则不打印任何内容,但这会导致错误。我可以猜到中间件存在问题(我使用的是 redux-promise)。如您所见,我在应用程序定义中添加了中间件,我看不出它缺少什么任何想法?这是我的代码:

动作/index.js:

减速器/reducer_tests.js

动作/index.js

容器/list_tests.js

index.js

包.json

编辑:从动作创建者(数组包含 api 列表入口点上的唯一对象):

​ status: 200 ​ statusText: "OK" ​proto : Object { … }

从减速机:

如果我在容器上记录测试道具,首先它记录一个空数组 [] 然后它记录一个长度为 1 的数组