问题标签 [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 投票
4 回答
4737 浏览

asynchronous - Redux:使用异步中间件与在成功函数上调度操作

我正在尝试将 Redux 集成到我的 React 项目中。目前我没有使用任何 Flux 框架。

我的应用程序从 API 获取一些数据并以漂亮的方式显示它,如下所示:

在阅读有关 Redux 的文章时,我已经确定了两种可能的方法,可用于处理在 store 中存储我的成功数据:

  • 使用异步中间件,或
  • ADD_DATA从 ajax 函数的成功回调中调度动作

但我不确定哪种方法更好。

在回调中调度动作听起来很容易实现和理解,而异步中间件更难向不习惯使用函数式语言的人解释。

0 投票
1 回答
926 浏览

javascript - 我们如何在 Redux Async Actions 中模拟 fetch?

在 Redux 的编写测试部分,http:store.dispatch(actions.fetchTodos()) //rackt.org/redux/docs/recipes/WritingTests.html,如果 store.dispatch 确实在调用 actions.fetchTodos ,如何不调用 fetch 方法?

每次我尝试运行类似的东西时,我总是得到一个未定义的提取。即使我使用诺克。所以我必须监视我的行为,以免接到获取电话。

这是我的单元测试:

这是行动:

以及调用 fetch 的函数:

我不确定我正在做的方式是否足以仅用于测试操作,但是我确实遇到了 store.dispatch 的问题,它只返回了 expectedActions 的第一个元素,并且它不等于我的列表在间谍 addPasswordResetRequest 中提供。下面包括间谍行动。

0 投票
1 回答
668 浏览

redux - 这是一个 redux 中间件反模式吗?如何使用中间件正确构建异步操作

刚刚构建了我的第一个 API 中间件,只是想知道我应该在哪里为调度多个动作的动作创建者链接承诺。是我做了一个反模式:

fetchAndSaveJoke 应该在我的反应组件中调度部分动作,还是可以将其作为自己的动作创建者?

0 投票
11 回答
193906 浏览

javascript - 为什么我们需要中间件用于 Redux 中的异步流?

根据文档,“没有中间件,Redux 存储只支持同步数据流”。我不明白为什么会这样。为什么容器组件不能调用异步 API,然后调用dispatch动作?

例如,想象一个简单的 UI:一个字段和一个按钮。当用户按下按钮时,该字段将填充来自远程服务器的数据。

一个字段和一个按钮

渲染导出的组件后,我可以单击按钮并正确更新输入。

注意调用update中的函数connect。它调度一个告诉应用程序它正在更新的操作,然后执行一个异步调用。调用完成后,提供的值将作为另一个操作的有效负载分派。

这种方法有什么问题?正如文档所暗示的,我为什么要使用 Redux Thunk 或 Redux Promise?

编辑:我在 Redux repo 中搜索了线索,发现过去要求 Action Creator 是纯函数。例如,这里有一个用户试图为异步数据流提供更好的解释:

action creator 本身仍然是一个纯函数,但它返回的 thunk 函数不需要,它可以做我们的异步调用

动作创建者不再需要纯粹。那么,thunk/promise 中间件在过去肯定是需要的,但现在好像不再这样了?

0 投票
1 回答
124 浏览

reactjs - Redux mockStore 的预期操作仅返回列表的第一个元素

我得到的回应:

当我运行此代码时,我只返回第一个操作,而不是第二个。它不是一个列表,它只是一个动作。我需要测试动作的顺序,而不是是否调用了一个动作。

0 投票
2 回答
1726 浏览

javascript - Redux:使用 thunk 中间件和 combineReducers 为 getState 引入了额外的密钥

问题:在引入 之前使用thunk中间件时Redux.combineReducersgetState传递给 thunk 的正确返回具有正确键的对象。在重构为 use 之后Redux.combineReducersgetState传递给 thunk 现在返回一个带有嵌套键的对象。请参阅下面的代码(希望)说明我的观点。这可能导致潜在的维护噩梦,即必须不断为任何thunk访问状态的方法获取正确的密钥。

问题:有没有一种简单的方法可以在 ? 中设置正确的上下文键thunk?当我结合减速器并且必须插入键来访问正确的状态时,代码感觉很脆弱。我错过了一些简单的东西吗?

代码前:

代码后(引入更全球化的 appStore):

0 投票
1 回答
295 浏览

javascript - 没有开发工具的 Redux 时间旅行?

有没有办法用 Redux 核心进行时间旅行?从我所看到的看来,这似乎只能使用 devtools 使用,不推荐用于生产。我希望在多人游戏中使用 redux 来管理客户端服务器状态协调。

0 投票
1 回答
2886 浏览

javascript - 在 redux 中使用 thunk 中间件比使用常规函数作为异步操作创建者有什么好处?

我已经使用 redux 大约两个月了,最近才开始探索处理异步行为(例如获取数据)的不同方法。从文档GitHub 上的讨论中可以看出,使用thunk 中间件执行此操作的标准方法是一个非常简单的概念,但是我不确定我是否理解将执行异步状态机的责任交给 redux 的好处可以使用简单的独立功能时的中间件。

使用 thunk 中间件的传统 Redux 方法

异步操作创建者fetchPosts

那么也许在一个 ReactJS 组件中可能有一个按钮,如下图所示。

调度 fetchPosts

单击此按钮时,将调用异步操作创建者requestPosts ,该操作返回一个接受调度的函数,并负责执行任何可能具有副作用的异步代码,并调度可能产生的真实动作。

没有 thunk 中间件的稍微简单的示例

虽然上述内容完全可以理解,但不清楚为什么人们不喜欢只做一些稍微简单一点的事情,如下例所示。

没有动作创建者的委托异步调度

调用 fetchPosts 函数并将调度作为参数传递。

结论

基于并排的两个示例,我看不出使用 thunk 中间件的异步动作创建者如何给我买任何东西,并且它需要在设置中间件时增加复杂性并引入两种动作创建者(1)返回单个的纯函数要调度的动作 (2) 不纯的函数,这些函数将反馈动作和可能的其他 thunk 到调度程序。我觉得我在这里遗漏了一些东西,它可以解释在 redux 中调度不可变动作以外的东西的好处。

0 投票
1 回答
892 浏览

reactjs - Redux logging in

I have been looking for an elegant (and correct) way to handle logging in for a Redux application. Currently the the user is directed to a login component/container where he see's a form with username and password. Then when he clicks on submit I call an async login function and when the promise is fulfilled then I dispatch a loginSuccess and also a replacePath call. The following is some pseudo code:

This works but I'm not sure it's best practice. Anyone have any better implementations?

0 投票
1 回答
5077 浏览

javascript - React/Redux 存储状态未保存

我使用 thunk 中间件并将初始状态传递给 React,但问题是当我访问其他链接时没有保存 React 状态。
成功登录后,它应该呈现仪表板。用户在尝试访问页面 时
必须被重定向到仪表板(即根路径)。//login

我也应该使用 redux-router 吗?

我省略了一些代码,但它几乎如下所示。

init.js
我将 store 传递给 Provider

configureStore.js

初始状态.js

App.jsx 初始应用的状态传递给 React 的props

登录.jsx

登录容器.jsx

登录输入.jsx

loginActions.js

减速器/index.js

authReducer.js