前端状态管理请三思

最近我开始思考React应用的状态管理。我已经取得一些有趣的结论，并且在这篇文章里我会向你展示我们所谓的状态管理并不是真的在管理状态。

原文链接：managing-state-in-javascript-with-state-machines-stent

我们避而不谈的是什么（The elephant in the room）

我们来看一个简单的例子。想象这是一个展示用户名称、密码和一个按钮的表单组件。用户会在填写表单后点击提交。如果一切顺利，我们完成了登录，并且有必要展示欢迎信息和一些链接：

我们假定这个组件有两个展示状态。一个是未登录状态，另一个是用户登录后的状态。所以从管理这两种状态开始，我们用一个布尔值的标志位来描述用户的状态。

var isLoggedIn;
isLoggedIn = false; // 展示表单
isLoggedIn = true; // 展示欢迎信息和链接

但是这样还不够。如果我们点击提交按钮后触发的HTTP请求需要一些时间来响应，我们不能把表单孤零零的放在屏幕上，而需要更多的UI元素来展示这样的中间状态，因此我们不得不在组件中引入另一个状态。

现在我们有了第三种展示状态，仅仅用一个 isLoggedIn 变量已经不能解决了。不走运的是我们不能设置变量值为 false-ish，它不是 true 也不是 false。当然，我们可以引入另一个变量比如说 isInProgress。一旦我们发送请求就会把这个变量的值置为 true。这个变量会告诉我们是处于请求的过程中并且用户应该看到加载中的展示状态。

var isLoggedIn;
var isInProgress; 

// 展示表单
isLoggedIn = false;
isInProgress =