问题标签 [redux-thunk]

假设我有一个像 Facebook 这样的索引页面，上面有朋友列表。假设我想预先获取您的前十个朋友的个人资料，这样当您路由到其中一个个人资料时，应用程序就不需要发出请求。

但是假设我想为配置文件页面设置 .x 秒的过渡动画，以便在配置文件未加载的情况下，您不会看到加载屏幕（希望实际请求会在少于动画时间的时间内返回）。

对我来说，棘手的部分是：我什么时候更改路线并使用实际配置文件重新渲染页面（而不是动画过渡到它）。

路由器应该只关心获取必要的数据，等待，然后最终呈现实际的配置文件，这似乎是一成不变的。

看来动作创建者必须弄清楚何时更改路线。而且由于似乎只有在转换和API 调用都完成后才能更改路线，所以我能想到的唯一方法是使用看起来像这样的动作创建器：

但这对我来说似乎过于复杂。每当我在 redux 中做正确的事情时，我都知道，因为感觉就是正确的。这没有。好像真的有什么不对劲。但我看不到任何其他方法可以做到这一点。但是，在浏览了很多例子之后，我只是没有找到任何能让我走上正确道路的东西。

是否有任何既定的约定？

谢谢！

首先，所有相关代码（单击文件名可查看该文件的完整源代码）。

LoginView.js

authentication.js（减速器）

authenticationActionCreator.js

流程很简单：

1. 用户打开页面。
2. 用户单击<button />调用authenticationActionCreator.login。

console.log输出是：

预期的console.log输出是：

问题在于render具有正确的状态（之后的状态AUTHENTICATION.LOGIN_SUCCESS）和componentWillReceiveProps旧的状态（之后的状态AUTHENTICATION.LOGIN_REQUEST）。

我是最后一次调用componentWillReceiveProps具有与该方法相同的状态对象render。

这是：

• 一个错误
• 我做错了什么
• 我的期望是错误的

?

我正在尝试使用mocha、chai 和 sinon测试我的 asyn thunk 中间件功能（我的第一次！）。

请考虑我的文件：

ayncActionCreators.js

ayncActionCreators.spec.js

我还没有实现 fetchCurrentUser 函数——只是假设它会花费一些“服务器”时间，然后它会调用“dispatch()”。

由于异步流程，规范失败。如果我在期望之前添加 101 毫秒的 setTimeout - 它会通过。

我的代码将使用一些返回承诺的 DB API，因此异步函数最终将如下所示：

所以我尝试要求 dbAPI 并在测试中创建一个 sinon.stub().returns(Promise.resolve()) 并且它没有正常工作（我认为由于存根返回一个已解决的承诺 - 异步函数将像一个同步函数一样）。

任何想法我应该如何测试这样的异步函数？

谢谢，阿米特。

现在有很多关于 redux 镇最新的小子redux-saga/redux-saga 的讨论。它使用生成器函数来监听/调度动作。

在开始讨论之前，我想知道使用async/awaitredux-saga的方法而不是下面的方法的优缺点。redux-thunk

一个组件可能看起来像这样，像往常一样调度操作。

然后我的动作看起来像这样：

在 redux 中，当我们需要访问与 componentProps 不直接相关但由该组件触发的 state 属性（即：存储在 state 中的祖父组件 id）时，我们是否应该尝试传递这部分 state来自触发事件的组件的操作创建者，即：

还是我们应该使用 redux-thunk 从 getState 获取数据？

我知道答案听起来第一种方法更合适，但我不知何故觉得 getState 和 redux-thunk 会导致不良做法，我想知道什么时候应该使用它。

所以我是新手Redux并且在访问STATE. 当我将constructor()方法添加到我的时Component (Welcome)，我得到一个Cannot find module /Welcome错误。我将在下面粘贴我的代码，因为我真的很挣扎！

我只是想打印出文本状态！

组件/欢迎/index.jsx

容器/app.jsx：

减速器/bar.jsx：

这是设置 text = "testssters" 的状态。我正在尝试在我的组件中打印出来。

路线.jsx：

configStore.jsx：

我正在阅读此处的 Redux 教程。

在我创建的应用程序中，我有一个带有副作用的操作，就像在调用 Date.now() 的 receivePosts 函数中显示的那样。

异步功能完成后会触发副作用。在我自己的应用程序中执行此异步测试时。我收到如下回复：

我预期行动的日期不等于实际行动的日期。在我预期的行动中，我有以下几点：

我的代码结构与 Redux 教程中的代码完全相同，除了我的 action creator 有这个副作用。

我的问题归结为：我如何处理这些副作用以使我的测试通过？

使用 webpack 创建用于开发和部署的单个包很容易。我希望能够将外部依赖项放入它自己的包中。因此，我有“external-bundle.js”和“index-bundle.js”。我遇到的问题是获得完整的解决方案。我有可行的解决方案，但它需要一个小的改进。

我使用 babel 编写所有代码，所有代码都存储在扩展名为 .es 的文件中。

这是我的目录树：

我的 webpack.config.js：

和 babel 配置以确保完整性：

我成功地将外部库包含在 index.html 中：

剩下的就是 redux-thunk 和 react-google-charts。我没有包含那些使用 html 脚本标签的模块，因为这些模块只是 CommonJS。您可以看到注释掉的外部部分，因为我无法弄清楚参考格式。

所以，我唯一简单的选择是让这些文件被 webpack 包含，因为 ES6 代码也被编译成 commonJS。

理想情况下，我想将所有外部依赖项放入外部包中，并将其与 HTML 文件中的脚本标记一起包含。我会为我正在处理的代码创建一个包。我可以将这个解决方案与 browserify 一起使用，但我无法用 webpack 解决这个问题。我什至为外部包创建了一个单独的配置文件，但我的代码未能在外部包中找到对象。

这两个问题有点联系。我需要帮助：

1. 从我的索引包中外部化 redux-thunk 和 react-google-charts。
2. 只买两包

我现在没有使用 RequireJS，我希望现在不要开始使用它。

谢谢

我正在尝试使用 redux thunk 链接调度

我如何让调度员返回商店的承诺？

进一步来说：

我可能只是不理解这里的某些内容，但在所有带有 的示例中redux-thunk，它们调用了一个单独的异步事件（如fetch），它显然返回一个Promise.

我特别要寻找的是当我向商店发送操作时：如何确保商店在上述函数中发生任何其他事情之前完全处理了该操作action_creator()。

理想情况下，我希望商店返回某种承诺，但我不明白这是如何或在哪里发生的？

我有一个（反应）容器组件。它的孩子需要来自不同 api 端点的不同数据，所以我想同时调度 2 个动作（都是异步的）。

这似乎是不可能的。如果我有两个调度，activeSensors总是空的......

编辑：查看完整组件的来源。