reactjs - 在 react 组件中保持与 ui 相关的强状态是一种不好的做法吗？

Question

我正在将我的 reactJs 应用程序迁移到 redux/mobx。现在我有 3 个组件，每个组件在它们的状态下都有以下结构：

name:string,
surname:string,
showError: boolean,
loading:boolean

如您所见，将姓名/姓氏移动到集中式存储库以保持全局状态是有意义的。我不太确定 showError 和加载：它们是布尔值，用于显示错误消息和特定组件内部的微调器。

我个人不喜欢将这种“与 UI 相关的状态”置于集中状态的想法，我想让它留在特定组件内部，因为其他组件永远不需要访问/更新这些东西。

所以我的想法如下：

this.state = {showError, loading};
this.businessState = props.state;

简而言之，我将继续使用 React 的 setState() 函数更新“状态”，同时将所谓的“业务状态”的管理留给 redux/mobx。

这是一个好的做法还是我做的特别糟糕？

标签： reactjsreduxmobx

Answer 1

我个人对此没有任何问题，因为“加载”和“显示错误”与状态相关，而不是 UI 组件。基本上是说，当我从 API 调用中填充状态时，它是否已经完成并且有什么问题吗？UI 组件会相应地显示。

我会根据您的 BE 系统抛出的错误的结构将 showError 设为字符串或字符串 []。

我还将您的状态分解为特定的减速器，它们处理特定的业务功能并根据特定的业务功能加载状态，而不是加载页面上的每个组件。

我希望这在某种程度上有所帮助。