前言
在现代的前端开发中，React 是一种非常流行的框架。在 React 的生态中，Redux 是另外一种非常流行的状态管理框架。当我们开发大型应用时，需要使用一种可伸缩的架构，使得我们的代码更加易于测试、维护和扩展。这时，generator-scalable-react-redux 这个 npm 包就成了我们的绝佳选择。
什么是 generator-scalable-react-redux？
generator-scalable-react-redux 是一个基于 React、Redux 和 Ducks 架构的应用生成器。它提供了一个可伸缩的文件结构、代码风格和开发工具，可用于快速搭建现代的 Web 应用。
安装
使用 npm 或 yarn 可以很方便地安装 generator-scalable-react-redux：
npm install -g generator-scalable-react-redux yarn global add generator-scalable-react-redux
使用
生成一个基础 React+Redux 应用的命令如下：
yo scalable-react-redux
Webpack 会在后台自动运行，创建一个 React+Redux 的应用程序。在您浏览器中输入以下地址，即可访问新创建的应用程序：http://localhost:8080。
架构说明
在 generator-scalable-react-redux 中，应用程序的文件结构被组织成了不同层的模块。这些模块使用 Ducks 架构的方式组织，即每个模块包含它们自己的 reducer、action 和 selector。
扩展性
generator-scalable-react-redux 的应用程序可以很容易地扩展。它规定了以下的文件结构：
-- -------------------- ---- ------- --- ------- --- -------- --- --------- --- ---------- - --- ------------ - --- -------------- --- ---------- - --- ------------ - --- -------------- - --- ----------------- --- ------ - --- -------- - --- ------------ - --- --------- - --- -------- --- ----- --- -------- --- ----- --- -----
actions: 包含一个或多个 Redux action。reducers: 包含一个或多个 Redux reducer。selectors: 包含一个或多个 Redux selector。components: 包含一个或多个 React Component。containers: 包含一个或多个 React Container。config: 包含一个或多个配置文件。sagas: 包含一个或多个 Redux saga。services: 包含一个或多个服务文件。types: 包含应用程序中使用的类型。utils: 包含一个或多个可重用的 JavaScript 功能。
样式
generator-scalable-react-redux 使用 SCSS 作为默认的样式处理器。您可以在 config/index.js 中更改为其他样式处理器。
开发工具
generator-scalable-react-redux 为开发过程中的测试、调试和部署提供了很多工具。您可以在 package.json 中找到这些工具的配置。这里列举一些最常用的工具：
npm start: 在本地启动 Webpack Dev Server。npm run build: 打包应用程序以进行部署。npm test: 运行 Jest 进行测试。npm run lint: 运行 ESLint 进行语法检查。
示例代码
初始应用程序包含一个简单的计数器，使用了 Redux 和 React。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -------------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- -------------
----- ------- ------- --------- -
------ --------- - -
------ ----------------------------
---------- --------------------------
---------- -------------------------
--
-------- -
----- - ------ ---------- --------- - - -----------
------ -
-----
----------------
------- ------------------------------
------- ------------------------------
------
--
-
-
----- --------------- - ----- -- --
------ -------------
---
------ ------- ------------------------ - ---------- --------- ------------总结
generator-scalable-react-redux 是一个功能强大的 React+Redux 应用程序生成器，它提供了一个可伸缩的文件结构、代码风格和开发工具，帮助我们快速搭建现代化的 Web 应用程序。通过学习此 npm 包的使用，我们可以更好地理解 React 和 Redux 的基础知识，提高我们的前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663e81e8991b448e243f