如何构建你的 React Redux 应用程序

        react-redux 应用程序的功能文件夹结构，易于维护。

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

        但是 React App 的结构不当会影响 App 的可扩展性和可维护性。随着应用程序的增长，我们可能会添加新功能并删除一些旧功能，因此每个组件都需要彼此松散耦合。让我们看看如何构建 React 应用程序以避免此类问题。

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

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

应用程序

        整个应用程序使用的全局应用程序设置和配置在如下所示的应用程序文件夹中定义，其中包         括axiosClient、rootReducer、saga 和 store。

常见的

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

特征

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

路线

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

资产

        图像、文件、图标等静态资产放置在资产目录中。

测试

        单元测试用例及其模拟转到测试目录。

风格

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

                使用上述功能文件夹结构，我们可以轻松删除或添加与功能相关的代码而不会出现问题。特性文件夹结构是Redux 风格指南推荐的。通过使用 Redux Toolkit，我们避免了像 action 和 reducer 这样的样板代码。七爪网七爪网-专注于分销商城，小程序定制，网站开发，定制开发，成品源码的源码交易平台