企业应用程序的 React 架构

构建和组织企业应用程序的 React 组件

React 是用于构建用户界面的最流行的 JavaScript 库。React 没有任何标准的文件夹结构来对组件和逻辑进行分组。React App 可以根据项目需求以任何方式构建。

但是，React 应用的结构设计不当会影响应用的可扩展性和可维护性。随着应用规模的增长，我们可能会添加新功能或移除一些旧功能，因此每个组件之间需要保持松耦合。让我们看看如何构建 React 应用以避免此类问题。

我们需要根据功能对文件进行分组。也就是说，一个功能的所有文件都放在同一个文件夹中。请查看下图了解文件夹结构。

在上图中，我们可以看到 React 应用程序的文件夹，让我们分解一下每个文件夹的用途。

应用程序

全局应用设置以及整个应用使用的配置在app文件夹中定义如下，包括axiosClient、rootReducer、saga和store。

可重复使用的助手、共享组件、钩子等在公共文件夹中定义。

特定于功能的组件、Slice（Redux Reducer 逻辑和相关操作 - Redux Toolkit）、API 和样式都放在 features 文件夹中。

组件的私有和公共路由在 routes 文件夹中定义。基于身份验证的路由限制在这里处理。

静态资产（如图像、文件、图标）都放在资产目录中。

单元测试用例及其模拟进入测试目录。

全局样式、主题配置放在style文件夹中。

使用上述功能文件夹结构，我们可以轻松地删除或添加与功能相关的代码，而不会出现任何问题。该功能文件夹结构是Redux 样式指南推荐的。通过使用 Redux Toolkit，我们避免了像 Action 和 Reducer 这样的样板代码。

需要了解更多关于 Redux ToolKit 的信息，可以查看我关于 Redux ToolKit 的文章。

基于功能文件夹的文件结构将使 React 应用程序更易于维护、可扩展且松散耦合。

感谢您的阅读。

在Twitter上获取更多更新。