问题标签 [redux-promise-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 投票
1 回答
808 浏览

redux - Redux createStore 错误:期望 reducer 是一个函数

我遇到了一个错误createStore,我不明白为什么。

以上是我的代码,我在行中得到错误

该错误预计 Reducer 是一个函数。我正在使用 React Native 0.37 和最新版本的 redux、redux-thunk 和 redux-promise-middleware。reducers 是 combineReducers 的结果。

提前致谢。

0 投票
2 回答
365 浏览

reactjs - Redux thunk 动作和共享状态

我希望我的应用程序知道何时触发异步操作以及何时完成。这样做的原因是我希望loading我的应用程序的整体状态设置为true所有异步操作完成的时间。对此的早期实现使用全局计数器进行回调。

这些动作可以在不同的文件中,并由负责不同状态分支的不同 reducer 监听。

我正在thunk-middleware结合使用,redux-promise-middleware因此我的一个异步操作可能如下所示:

然后这将调度STATE_BRANCH/REQUEST_SOME_DATA_FULFILLEDSTATE_BRANCH/REQUEST_SOME_DATA_REJECTED完成时。

由于 promise 中间件,我发现很难拦截调用并计算/确定已发出多少个 ajax 请求以及已完成多少个请求,因为这些操作是预先确定的,我无法从我的 reducer 发送另一个操作。

我显然可以在那里更新状态,但是异步操作可能会分散到状态树的几个部分,所以我没有一个整体的地方来管理请求。

有谁知道我如何解决这类问题。如果描述/用例不清楚,请大声喊叫。

0 投票
2 回答
2485 浏览

redux - 如何将数据添加到待处理的操作?

我正在使用 Axios、Redux 和 Redux Promise 中间件。

我有以下动作创建者:

在我的减速器中FETCH_USERS_PENDING,我想将请求的 url 保存在我的状态中。我怎样才能做到这一点?

0 投票
3 回答
7999 浏览

javascript - Error handling redux-promise-middleware

I'm learning React, along with pretty much all the necessary technology around it all at once - so I often get tripped up by things I should probably know already.

I've encountered a problem when it comes to error handling my async events. I've scoured the web and nothing really answers exactly what I'm looking for.

I'm currently using redux with redux-promise-middleware to handle the async actions, like this:

There are two things here: first, the code works just fine when no errors are present. However, when I purposely create an error in the code the correct methods are firing but I still end up with the following error in my console:

Should the .catch(...) block not be handling this? What am I missing? Should I be getting this anyway? If so, why?

Secondly, I've read that wrapping the fetch inside a new Promise is an anti-pattern, and there was an almost-hint that this may be what's causing problems here. All the examples I've come across use it in this fashion. What's the alternative? How do I fire the resolve/reject to dispatch the next actions without the wrapper?

Any help will be greatly appreciated. Thanks masters of the web.

-------------EDIT 1----------------

From the official redux-promise-middleware github examples, they have the following code:

It seems to intention with the middleware is to wrap fetch inside a new Promise and catching any rejects. If anyone has a working alternative way of implementing this using redux-promise-middleware, or can elaborate on why its following this pattern that would be greatly appreciated.

-------------EDIT 2----------------

Not sure what the intended way of implementing this is or how to avoid the Uncaught error in the promise. Simply calling Promise.reject(...) results in an uncaught error unless you include error handling functions: Promise.reject(...).then(() =>{...}, error => {...}). Including this with the middleware results in the rejected action never being dispatched. I've moved away from redux-promise-middleware till I can find a suitable fix and/or implementation.

0 投票
1 回答
2325 浏览

javascript - 以正确的方式将 redux-thunk 与 redux-promise-middleware 一起使用

我正在一个使用 react 和 redux 的项目中工作,我足够新,所以我试图更好地理解如何一起使用 redux-thunk 和 redux-promise。您可以在下面看到我的文件,在我的操作中,我创建了一个获取通用函数 apiFetch() 以便在每次需要获取时使用。此函数返回一个承诺,我将在 loadBooks() 中解决,代码正在运行并且记录已上传,但是当我检查操作日志时,我看到第一个操作未定义,在 BOOKS_LOADING 之后, LOAD_BOOKS、BOOKS_LOADING 和 LOAD_BOOKS_SUCCESS。

我对此有两个问题:

1) 为什么第一个动作未定义,而我使用的是 LOAD_BOOKS 而不是 LOAD_BOOKS_START?

2) 例如,如果获取的 url 错误,我希望看到操作 LOAD_BOOKS_ERROR,而不是日志的结果:

如果我不使用 apiFetch(),而是使用正常的 fetch 函数,那么一切正常,这也是错误的一部分,但无论如何 LOAD_BOOKS 不是 LOAD_BOOKS_START。

预先感谢您的任何帮助!

configureStore.js

动作/index.js

常量/application.js

减速器/reducer_book.js

0 投票
0 回答
177 浏览

reactjs - Redux 中 Action Creator 的返回类型

我是 Redux 结构的新手。到目前为止,我已经开发了一个应用程序,我们可以在其中从列表中呈现表的详细信息。所以我的动作创建者之一是 selectTable,如下所示:

由于我使用的是 redux promise 中间件,因此我在减速器中捕获了操作“TABLE_SELECTED_FULFILLED”并尝试访问操作的项目部分(项目:表),但它给出了未定义的..所以我在减速器中得到的只是操作.type 和 payload .. 有人可以帮忙吗.. 我怎样才能从我的动作创建者访问该表详细信息或项目部分到我的减速器中.. 谢谢。

0 投票
2 回答
91 浏览

javascript - 用承诺修改状态

为什么我的 Promise 并没有真正更新 Redux 中的状态?

我正在使用 redux-promise-middleware。当我调用我的 API 时,它会执行 _PENDING 和 _FULFILLED 的承诺步骤,但状态永远不会更新以反映更改。

我该如何正确地做到这一点,以便我真正得到我的数据。


这是我的状态的图片:

_PENDING 和 _FULFILLED 状态

如您所见,isFetched在 promise 完成后不会变为 true,并且data永远不会将返回的响应数据加载到自身中。


这是我的 API 助手:


我的行动:


还有我的减速机:


这是我的商店

0 投票
1 回答
61 浏览

reactjs - 从 ReduxPromise 映射对象数据

尝试映射从承诺返回的对象,我正在使用 react-router 4 和 redux,redux-promise。数据已作为承诺返回,但我似乎无法映射它。如果我没记错的话,render() 返回 renderBanner 函数并在那里渲染它,但我有点不确定如何映射这些数据,因为我只想抓取 img 并映射它。

编辑:示例(使用不同的 api 但相同的过程)

组件文件

承诺返回

0 投票
2 回答
2161 浏览

reactjs - 使用 Promise 中间件为 React-Redux 应用程序添加加载指示器

我是反应 redux 的新手。我想在用户按下搜索按钮时添加加载文本,并在数据返回或操作完成时关闭文本。在正常的异步函数中,我可以在回调之前和之后切换 isLoading 标志。

但是,在我的应用程序中,我正在调度一个返回“类型”和“有效负载”的操作,这是一个承诺。中间件 redux-promise 然后“自动”转换该承诺有效负载并将其发送到减速器。换句话说,中间件在幕后为 Promise 执行 .then 操作,并为我的 reducer 提供正确的数据。

在这种情况下,我不确定如何将加载文本添加到我的视图中,因为一旦我调用 this.props.getIdByName(this.state.value),我不知道数据何时返回。对我来说,合乎逻辑的地方是在 reducer 内,因为那是数据返回的时候。但是,我相信这将是一个坏方法,因为减速器不应该执行这样的任务?

在我的组件中,我的提交具有以下功能

在我的 actions/index.js 文件中,我有以下动作生成器

在我的 reducers/reducers.jsx 里面

在我的主 index.js 文件中,我使用以下中间件创建了商店

0 投票
3 回答
1124 浏览

reactjs - React Redux 添加额外字段以执行操作导致承诺返回不同

我想在我的动作生成器中添加一个 isLoading 标志并在我的减速器上重置它。最初没有标志,我的代码可以工作,动作如下所示

减速机看起来像

好结果

如您所见,该对象返回正常,我可以通过 action.payload.data.data.results 获取我的列表

请注意,我使用 redux Promise 作为我的中间件来处理 Promise。

一旦我将操作更改为以下并重新运行代码,我就会将我的有效负载(如下图所示)作为 Promise 而不是返回的对象

isLoading 添加

为什么只是简单地添加另一个变量导致这个问题?