React + Flux：在另一个动作之后调用一个动作的最佳实践？

Question

我有一个组件，我们称它为 List，它调用动作创建器 Action1.getItems()。在 Action1.getItems() 从服务器检索信息后，我需要调用另一个动作创建者：Action2.getMoreItems()，这是在不同文件中的完全不同的动作。

事实：

两个动作创建者都派发一个动作并更改一个商店。
我无法在 List 的 _onChange() 中调用 Action2.getMoreItems()，因为它会抛出错误“Cannot dispatch in the middle of a dispatch ...”

可能性？

在服务器returns

Action1.getItems()

Action2.getMoreItems()

添加一个回调，这样我就会有 Action1.getItems(callback) 并在 List 组件的回调中调用 Action2.getMoreItems()。

我相信这可能是 Flux 的一个非常基本的用法，但我仍然无法理解如何正确使用它，这两种解决方案在我看来都很丑陋。

建议？

谢谢！

Answer 1

getMoreItems是否依赖于getItems的return值？如果是这样，您可以在 getItems 的 .then 回调中调用该操作。

如果不是，那么您可以同时调用这两个调用，然后连接 promise 的结果。

所以我对你的问题投了第二票。我认为这根本不是一个丑陋的解决方案。您将获取物品和更多物品的责任委派给您的行动。组件本身对此一无所知，只是简单地发送了对这些项目的请求。它们的构建方式应该对组件透明。

Answer 2

大多数 flux 实现都有类似 "waitFor" 的方法，它让一个存储等待另一个存储完成。

假设您的商店中需要两个 execute 2 方法：GetUser 和 GetPermissions。第一个获取用户，后者获取权限，获取的用户具有。显然，GetPermissions需要等待第一个方法获取用户对象

在这种情况下，您将分派一个名为 GetUser 的操作，并让的存储函数都监听该操作。因此，如果您调度 GetUser 两个存储方法都会被执行。

在alt.js（flux implementation）和其他很多地方，有像waitFor(store)这样的方法，所以GetPermissions可以等待UserStore获取用户。在 alt.js 伪代码中，它看起来像这样：

// UserStore
function getUser() {
    fetch('api/user').then(this.setState);
}

// PermissionsStore
function getPermissions() {
    this.waitFor(UserStore);
    let user = UserStore.getState().user;
    fetch('api/permission', user).then(this.setState);
}

正如我所说，这不是有效的伪代码，但它展示了概念。如果您有兴趣，通量实现 alt.js 很棒。在 alt.js.org

查看

React + Flux：在另一个动作之后调用一个动作的最佳实践？

React + Flux: best practice for calling an action after another action?

action

flux

reactjs