问题标签 [flummox]

我目前有一个非常简单的 React 应用程序，它使用状态来确定几个视图。单击提交元素会触发对传递登录或注册凭据的端点的简单调用。我可以继续沿着这条道路使用从服务器返回的 React 和 JSON 来确定我的视图，但我知道这不是处理数据的正确方式。

我的问题是，从这里开始，如何使用 Flummox 实现 Flux 模式？我是否使用有效负载触发操作并在操作或存储中进行 API 调用？我试图了解从 UI 中的操作到 API 调用，再到获取响应和 UI 响应商店更改的正确方法。

下面是我的 Auth 组件的代码。我想看一个关于如何在如此简单的情况下使用 Flummox 的示例，这样我就可以了解扩展和添加功能需要什么。

验证.jsx

我试图弄清楚在使用通量库 Flummox 时在哪里加载初始状态。我已经看到了几种方法，但我很好奇是否有推荐的方法。假设您有一些已保存在本地存储或数据库或其他东西中的待办事项。您将在哪里获取这些并将它们放入您商店的状态？

我已经看到它建议在 react's 中执行实际的 ajax 查询componentDidMount，并触发一个动作，将 ajax 的结果传递给该动作。该数据将流入商店的状态并作为您的初始状态返回视图。

我还看到它建议在操作本身内部执行 ajax，flummox 似乎通过它们的异步等待支持很好地支持。我猜在这种情况下，您只会触发一些获取初始状态的操作？

我希望能够在 Flummox 操作中进行 API 调用，并根据响应进行不同的转换。我可以将路由器传递给操作调用，但我正在寻找一种可能更好的方法的建议。

更新：

正确答案如下，但我想为此添加一些细节。

我正在做一个同构应用程序，1. 需要从 api 获取数据，2. 可能需要根据 api 响应进行重定向。无论我做什么都需要通过 express.js 应用程序和 react 来工作。

我做了一个小库来执行 api 调用并返回一些结果。我将一个对象传递给它（从 express 中查询参数对象用于服务器端或我为反应端创建的类似对象）。这个库发出请求，确定是否需要重定向并传回错误、路径（字符串）、重定向（布尔值）和数据（json）。

在 express 中，如果重定向布尔值为真，我只需使用当前查询参数重定向到它。如果它是假的，我通过一个更新商店的动作将数据传递给flux。然后，我使用 react 渲染ToString，序列化存储，以便 clint 端可以引导，并将渲染页面发送到客户端。

在反应中，重定向布尔值并不重要，我从我的库中获取响应，将数据传递给我的通量操作，然后转换到任何路径。确实没有重定向的概念。无论如何都要走上这条路。

希望这对某人有帮助。

我刚刚开始使用flummox，我有点困惑:)

这是我的用例。

应用布局

在我的应用程序中，我有Alert Component. 当发生某些事情时，我AlertAction从某个组件触发一个，它会将警报有效负载分派到AlertStore，它会被更新，并AlertComponent显示警报（ + 在一段时间后隐藏它）。

例如我有一个PostEdit Component. 表单提交后，我向 API 发送请求PostActions并接收响应，该响应被分派到PostStore. 商店得到更新并PostEdit Component得到通知。在PostEdit'scomponentWillReceiveProps我检查道具，从商店收到，并触发AlertAction显示警报。

2个问题：

1. 我必须使用setTimeout触发AlertAction来Post Component使警报发生（下面的代码）。
2. 主要问题是在第一次转换后Alert Component停止收听。AlertStorereact-router

这是console.log，说明了问题：

更奇怪的是，console.log 中的 changed-store-notification 在 dispatch-payload-from-action-notification 之前打印（这会导致此存储更改）。

以下是代码片段：

警报处理程序.jsx

警报.jsx

PostEdit.jsx

不确定是这些错误还是我错过了通量/flummox 模式中的某些东西并且做错了事情。感谢您的反馈！

我已经开始通过flummox、react-bootstrap和react-router玩react。我正在尝试为我的网站创建一个基本的同构 CMS。

语境 ：

在身份验证方面，每个用户都有一个功能列表，每个组件都使用我的身份验证存储“可以”的方法来显示或不显示，等等......

我在顶部有一个用户导航栏，在 reat-router 处理的每个页面上都可见，带有一个登录/注销按钮，如果用户未登录，则基本上在单击带有登录表单的模态时显示，否则注销确认。

当用户登录时，我希望更新当前显示的页面上的组件（与注销相同）。

这是一个页面示例，该页面显示一个列表，该列表只能由具有适当权限的经过身份验证的用户查看：

过程 ：

1. 当用户提交表单时，我调用了一个动作
2. 该操作向服务器发送请求
3. 该操作由更新其 currentUser 的身份验证存储注册
4. 该组件有一个 currentUser 道具，并使用 componentWillReceiveProps 来检查这个道具是否改变并调用一个动作来请求列表
5. 该操作由更新其商品的商店注册

问题：无法在调度过程中调度

Hack：第二个动作放在 setTimeout 中

问题： 我阅读了很多关于这个特定问题的答案，据说在同一个调度程序周期内调用两个动作是糟糕的设计。所以我的问题是：有没有更好的方法来设计这个过程？

PS：如有必要，我可以发布一些代码。

在我最近的应用程序中，我一直在根据请求在服务器上使用 Flux（使用 Flummox - http://acdlite.github.io/flummox）来进行同构渲染。一般来说，它看起来如下：

如您所见，我一直在通过 api 服务接收数据，但是一些 React 组件自己在客户端发出请求。

他们通过调用flux.getActions('items').getSomeDataAsync容器组件中的操作来做到这一点（在componentDidMount生命周期方法中）。

我的问题 -是否有可能（根据您的经验）在容器组件内部有一些方法将在服务器上调用以在其中调用异步操作？

情况：

我正在使用Reactjs和Flummox构建一个 Web 服务，它将使用Socket.io连接到一个简单的套接字服务器。它需要在他们的仪表板上跟踪每个用户的多个连接，并且想知道这样做的最佳方法。每个用户可以有多个令牌，每个令牌都与一个套接字连接相关联。我有两种方法，想知道哪种方法更流畅，或者是否有另一种更好的方法更流畅。

我的第一个解决方案

创建一个我导入到我的反应视图中的类，该类处理套接字连接并在套接字响应时更新我的​​存储。该类可能看起来像这样：

从我的反应来看：

注意：此代码只是为了传达想法，尚未经过测试。

我的第二个解决方案

我的第二种方法是做类似的事情，但不是为每个套接字实例化一个新类，而是可以在单个通量存储中处理套接字。像这样的东西：