了解react-redux应用程序中的决策流程

Question

我正在尝试了解react-redux应用程序中与登录相关的应用程序流程。

• redux维护的应用程序状态包含一个名为loggedIn的布尔值，最初为false。
• 根据状态loggedIn为false，主应用程序屏幕会显示一个包含username和password字段的登录面板，用户可在其中输入凭据。
• 登录面板上的login按钮会调用操作创建者，并传入凭据。
• 动作创建者启动对服务器登录API的异步AJAX调用。
• 承诺中间件，如redux-promise，拦截承诺并用来自服务器的响应替换动作的有效负载。同时，服务器检查凭据并返回＆＃34; 200 Ok＆＃34;或＆＃34; 401未经授权＆＃34;，视情况而定。
• 操作缩减器检查操作有效内容中的响应，并根据需要设置loggedIn状态的值（false用于＆＃34; 401＆＃34;和true用于＆ ＃34; 200＆＃34;。）
• 如果loggedIn状态为false或＆＃34;已成功登录＆＃34;主应用程序屏幕将再次呈现登录面板面板如果是true。

这种流程有意义吗？这是处理react-redux单页面应用程序中的登录的惯用方法吗？还有更好的方法吗？

Answer 1

我认为一般流程是有意义的，我会再增加两个项目：

1. 将身份验证令牌保存到本地存储，否则如果刷新页面则会被注销，因为loggedIn将重置为false。然后，当应用重新启动并验证令牌仍然有效时，您需要重新加载令牌。

2. 我还有一个loginErrorMessage来显示来自服务器的任何错误响应。