2

我正在使用 ReactJS 使用 Facebook Flux(我使用的是 Fluxxor,但我认为这并不重要),到目前为止,我认为它们是在应用程序中处理数据流的好方法。然而,有一件事我真的很难理解。可能这只是 Flex 不应该做的事情,或者我遗漏了一些明显的东西,但因此我问...

例如,我正在构建一个用于登录的系统。非常简单——弹出一个登录对话框,输入用户名和密码并按下按钮。这会调用 LoginAction.login(username, password) Action Creator,它将 LOGIN 事件发送到 Dispatcher,然后触发 API 调用以验证用户身份并确保凭据正确。如果我们从 API 获得成功,那么我们会触发 LOGIN_SUCCESS 事件到 Dispatcher,SessionStore 会处理这个并存储我们已经成功登录的事实,以及我们是谁的详细信息。然后,这会触发 UI 的某些部分进行更新 - 例如,“登录”按钮更改为“Hello Graham”文本,并改为“注销”按钮。这一切都非常简单,而且有效且有意义。

我遇到的问题是登录失败时。如果我输入了无效的用户名/密码,那么我希望登录对话框告诉用户这一点,以便他们可以更正输入的内容并重试。我能想到的唯一方法是向 Dispatcher 发送一个 LOGIN_FAILED 事件,然后由一些 Store 处理,该 Store 存储最后一个登录错误以供 Dialog 显示。但这只是感觉很奇怪,因为这些错误不是应用程序状态,而是有关失败的请求的传递信息,然后用户将更正并重试。

在我看来,这种传递状态将在 API 调用中非常常见,因为用户输入可能会失败,因此不属于应用程序状态的一部分,而是属于其他地方。但是,我无法弄清楚 Flux 如何允许这种传递状态返回到 UI 以显示给用户......

4

1 回答 1

0

SessionStore 处理这个并存储我们已经成功登录的事实

在您的情况下,您保留有关成功身份验证的信息。为什么不将有关不成功的信息也保存在商店(同一商店或独立的一次,它为用户保留身份验证状态或权限状态)?

这是您所在州的另一面。在这种情况下,您只需要在失败时发送特殊事件(例如在您成功登录的情况下)以存储,保存新状态并将更改发送到 UI。

这是与我的意思相似的示例。如果登录失败,您向服务器发送请求,蚂蚁可以调度一个动作。

于 2015-01-19T11:18:40.303 回答