react-redux-saga-boilerplate目录结构完全图解新手必备的项目布局地图【免费下载链接】react-redux-saga-boilerplateStarter kit with react-router, react-helmet, redux, redux-saga and styled-components项目地址: https://gitcode.com/gh_mirrors/re/react-redux-saga-boilerplatereact-redux-saga-boilerplate 是一套开箱即用的 React 项目脚手架Boilerplate内置 React Router、Redux、Redux-Saga、styled-components 与 react-helmet-async并配齐了 Webpack 构建、Jest 单测、Cypress 端到端测试。对于刚接触 React Redux-Saga 技术栈的新手来说看懂它的目录结构就等于拿到了一张可照抄的项目布局地图。️ 全景速览一张目录树看懂项目先记住这张目录树后文逐个讲解react-redux-saga-boilerplate/ ├── assets/ # 静态资源HTML 模板、图标、manifest ├── config/ # Webpack 构建配置 ├── cypress/ # 端到端E2E测试 ├── src/ # 应用源码核心 │ ├── actions/ # Redux 动作用户指令的起点 │ ├── reducers/ # 纯函数状态变更逻辑 │ ├── sagas/ # Redux-Saga 副作用异步请求 │ ├── selectors/ # 从 Store 读取数据的统一出口 │ ├── store/ # Store 组装与中间件 │ ├── routes/ # 页面级路由组件 │ ├── containers/ # 连接 Store 的业务容器 │ ├── components/ # 无状态通用组件 │ ├── modules/ # 主题、自定义 Hooks、工具函数 │ ├── literals/ # 常量字面量 │ └── types/ # TypeScript 类型定义 ├── test/ # 单元测试与 src 一一对应 ├── tools/ # npm 脚本start/build/deploy ├── package.json # 依赖与脚本入口 └── tsconfig.json # TypeScript 配置 快速上手3 步跑通项目如果你想边看目录边动手可以先克隆仓库git clone https://gitcode.com/gh_mirrors/re/react-redux-saga-boilerplate然后进入项目执行npm install安装依赖再执行npm start启动开发服务器。所有命令都定义在 package.json 的scripts字段里npm run build打包、npm test跑单测、npm run test:e2e跑端到端测试新手先记熟这几个就够了。 src/ 深度拆解Redux-Saga 数据流五件套这是全文重点。Redux-Saga 架构的核心是「Actions → Sagas → Reducers → Store → 组件」的数据流src/ 下的目录就是按这条流划分的。 actions/一切从动作开始actions/ 里每个文件对应一个业务模块如 user.ts、github.ts负责「定义用户想做什么」。比如登录动作就在这里定义组件通过dispatch派发动作。模块的汇总出口是 index.ts。 sagas/处理副作用的「中间人」sagas/ 是 Redux-Saga 的专属目录。当「获取 GitHub 数据」这类异步操作发生时Saga 监听对应 Action负责发请求、处理错误成功后再派发新 Action。入口文件 src/sagas/index.ts 用fork把各业务 Saga 挂到根 Saga 上——新增业务时在这里注册你的 Saga 是必做步骤。 reducers/纯粹的状态变更reducers/ 只回答一个问题「状态如何变」每个 reducer 都是纯函数按模块拆分app.ts、github.ts由 src/reducers/index.ts 汇总。它不关心数据从哪来只关心怎么改。 store/ selectors/数据的组装与读取src/store/index.ts 负责把 reducers、中间件、Saga 组装成完整 Store并配置了 redux-persist 持久化src/store/middleware.ts 集中管理中间件含 sagaMiddlewaresrc/selectors/ 是读取 Store 的统一出口组件里配合 src/modules/hooks.ts 提供的useAppSelector使用避免到处手写 selector。 其余重要目录目录职责新手提示routes/页面级组件Home.tsx、Private.tsx、NotFound.tsx新页面加在这里并在 Root 注册路由containers/连接 Store 的业务容器如 GitHub.tsx有数据逻辑的组件放这里components/无状态通用组件Header、Footer、Alert、Icon.tsx纯展示组件放这里modules/主题theme.ts、自定义 Hooks、工具函数跨页面复用的逻辑放这里types/全局 TypeScript 类型state.ts 定义了整棵 State 树新增 State 先在这里补类型literals/常量字面量如状态枚举 STATUS魔法值都收敛到这里config.ts应用级配置名称、默认状态改站点名称就改这里入口链路src/index.tsx 创建 Store 并挂载应用src/Root.tsx 则负责路由、主题 Provider 与页面框架这两个文件是读懂整个应用的钥匙。⚙️ config/ 与 tools/构建层的布局config/webpack.config.js主构建配置处理编译、压缩、图片加载等config/paths.js统一管理各目录路径改目录结构时先看它config/env.js 与 config/modules.js环境变量解析与 Babel 模块解析配置tools/npm start/npm run build等脚本的真正执行逻辑start.js、build一般无需改动。 test/ 与 cypress/测试也是目录的一部分test/ 与 src/一一对应每个目录都有同名测试文件如 test/sagas/user.spec.ts外加__fixtures__/测试数据、__mocks__/模块 mock、__setup__/全局配置。这种「镜像目录」写法是新手很值得借鉴的测试组织方式。cypress/ 则承担端到端测试integration/basic.js是测试用例fixtures/放数据由npm run test:e2e驱动。 assets/静态资源地图assets/index.html页面 HTML 模板含 SEO 元信息assets/manifest.json 与meta-icons/PWA 与 favicon 配置icons/与media/业务图标和展示素材供组件通过 src/components/Icon.tsx 引用。✅ 新手记忆口诀写业务actions → sagas → reducers → types四步走写页面routes 建页面Root.tsx 注册路由取数据selectors useAppSelector加测试在 test/ 下镜像一个同名目录。掌握这份地图后你既可以照它搭建自己的项目也可以把 react-redux-saga-boilerplate 直接当作起点把示例业务替换成你的功能即可开工。【免费下载链接】react-redux-saga-boilerplateStarter kit with react-router, react-helmet, redux, redux-saga and styled-components项目地址: https://gitcode.com/gh_mirrors/re/react-redux-saga-boilerplate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考