用于登录或基本上大多数表单处理的 Flux 架构

Posted 2023-02-22

【中文标题】用于登录或基本上大多数表单处理的 Flux 架构

【英文标题】：Flux architecture for a login or basically most forms processing

【发布时间】：2015-11-24 18:59:42

【问题描述】：

我正在尝试更多地了解通量架构，并正在设计一个简单的登录组件。假设当您登录（POST ajax）并返回错误。信息将如何流动？

我认为 LoginComponent 应该在 handleSubmit 函数上完成工作。 在 ajax 调用返回错误和消息后，组件是否应该创建一个操作，例如“UpdateLoginStatus with payload message: “no e-mail found”。这将触发 LoginStore 或其他东西来保存状态消息，然后它会发出一个事件，例如“LoginStatusMessageChanged”。 另一个名为 LoginStatusMessage 的完全不同的组件将注册以侦听 LoginStore 上的事件。它会收到有关此事件的通知，然后继续使用消息更新它自己的状态。它会去 LoginStore 并获取消息并通过渲染将其显示给用户。

【问题讨论】：

Error Handler with Flux 的可能重复项

问题标题问一件事，但问题主体似乎在问“如何处理 Flux 中的错误”，一直是answered in another question。

【参考方案1】：

不要让您的组件执行请求。那就是将 UI 与业务逻辑混合在一起。这总是很糟糕。

---

输入的用户名、密码和按钮应该由你的 React 组件处理。当按钮被点击时，组件应该触发一个动作。

//Component.js

handleSubmit: function()
    UserActions.login(this.state.username, this.state.password);

动作通知商店：

//UserActions.js

login(username, password) 
    this.dispatch(username: username, password: password);

Store 然后执行所需的 AJAX（因为这些操作本身不应该引起更改或请求）。

根据成功或错误，您的商店随后会触发新操作。它永远不应该直接保存响应。切勿在没有事先操作的情况下将数据保存在商店中。如果您愿意，您可以保存您当前正在登录的信息（例如，如果您想为微调器设置动画）

//UserStore.js

handleLogin(credentials) 
    this.isLoggingIn = true;
    AuthService.login(credentials.username, credentials.password).then((user) => 
        UserActions.loginSuccess(user);
    ).catch((errorMessage) => 
        UserActions.loginFailed(errorMessage);
    )

这些动作又做了他们愚蠢的事情，因为他们总是应该只是愚蠢的信使。

//UserActions.js

loginSuccess(user) 
    this.dispatch(user);


loginFailed(errorMessage) 
    this.dispatch(errorMessage);

接下来：处理您商店中的操作！

//UserStore.js

handleLoginSuccess(user) 
    this.user = user;
    this.isLoggedIn = true;
    this.isLoggingIn = false;


handleLoginFailed(errorMessage) 
    this.errorMessage = errorMessage;
    this.isLoggingIn = false;

就是这样。只要您的组件侦听 UserStore，它就会在您的用户登录、成功登录或出现错误时收到通知，同时逻辑和 UI 清晰分离，流程单一。

编辑：代码示例大多是伪代码。实际实现取决于您的 Flux 框架。

【参考方案2】：

我相信这个例子很好地涵盖了你的问题：https://github.com/przeor/react-router-flux-starter-kit/

【讨论】：

嗨。如果它被更新为使用 react-router 1.0.0 beta 3 那就太好了