React Speed Coding 源码深读roadmapHydrate 数据注水与路由级 Firebase 注入完整指南【免费下载链接】reactspeedcoding:rocket: Learn React with 30 reusable components, 15 chapters, and 3 single page apps. Fast start project with JavaScript ES6. React Hot Loading. React Router. Redux. PostCSS, FlexBox styling. Firebase database. Webpack packaging. Enzyme, Mocha, Chai BDD testing. ESLint and StyleLint. Browsersync.项目地址: https://gitcode.com/gh_mirrors/re/reactspeedcoding本文带你深入React Speed Coding一个包含 30 个可复用组件和 3 个单页应用的 React 学习项目的源码讲解roadmapHydrate 数据注水机制与路由级 Firebase 注入是怎么实现的。适合想读懂真实 React Redux Firebase 项目的初学者全程只需 10 分钟。项目架构一图看懂数据注水与路由分发整个应用只有两条数据主线静态数据主线本地特性列表 → 循环 dispatch 进 Redux store → Roadmap 组件读取渲染动态数据主线Firebase 实时数据库实例 → 作为Route参数注入 → 组件通过props.route取用入口文件一切的起点入口文件 app/index.jsx 只做三件关键的事第 24 行导入注水函数roadmapHydrate第 28 行立即执行roadmapHydrate()注意在渲染之前第 26 行从app/fixtures/rsdb.js导入firebaseApp和rsdb挂到特定Route上roadmapHydrate 数据注水一个循环灌满 Redux store注水hydrate是 Redux 里的常见手法把现成的初始数据一次性填充进状态树而不是让用户从零开始交互。数据从哪来特性清单写在 app/fixtures/roadmap/features.js 里——11 条章节 / 组件 / 应用类目标注了分类、点赞数和链接。这是典型的fixture测试夹具用法用假数据支撑真实渲染。store 怎么建app/store/roadmap.js 仅 3 行用createStore包裹roadmapApp并接上浏览器 Redux DevTools 扩展。状态怎么流转一条清晰的单向管道features.js →addFeatureaction creatorapp/actions/roadmap.js→store.dispatch→featuresreducerapp/reducers/roadmap.js→ 不可变追加进数组roadmapApp只是用combineReducers把categoryFilter、searchText、features三个小 reducer 合并成一个根 reducer见 app/reducers/roadmapApp.js职责单一、极易测试。注水函数本体只有 10 行核心逻辑就在 app/fixtures/roadmap/roadmapHydrate.js精华就一句store.dispatch(actions.addFeature(features[i].id, ...));它遍历features数组为每条特性 dispatch 一个addFeatureaction由 reducer 把新对象追加进features数组。为什么非要绕道 dispatch不直接改 store因为Redux 的纪律任何状态变更都必须经过 action这样才能被 DevTools 时间旅行、中间件记录测试里也能复现下文会看到测试正是这么做的。新手常见误区很多人以为注水要写很复杂的逻辑其实它就是一次批量 dispatch。数据源可以换成 API 响应函数形态完全不变——这正是把数据来源和状态更新解耦的好处。路由级 Firebase 注入把数据库实例塞进 RouteFirebase 侧同样简洁。app/fixtures/rsdb.js 初始化firebase导出两个对象firebaseApp认证auth入口rsdbfirebaseApp.database()即实时数据库实例关键技巧在app/index.jsx的两处Route声明上/custom与/workflow-editor路由firebaseApp和rsdb被当作Route 的自定义属性写在 JSX 上React Router 会把Route上的所有额外属性合并进route对象交给匹配到的组件。于是组件里这样取用WorkflowFireapp/components/WorkflowFire.jsxthis.props.rsdb.ref(steps)WorkflowEditorapp/components/WorkflowEditor.jsxthis.props.route.rsdb、this.props.route.firebaseApp.auth()实时订阅 vs 一次性读取WorkflowFire里有个漂亮的分支realtime为真时用ref(steps).on(value, ...)持续订阅否则用once(value)只读一次。同一个组件两种数据模式一行布尔 prop 切换。生命周期里的善后WorkflowEditor还演示了两个实用细节componentDidMount订阅steps节点用snap.numChildren()实时显示步数componentWillUnmount调用auth().signOut()离开页面自动登出写数据前检查currentUser未登录就提示需要登录才能添加步骤这套登录 → 写入 → 实时回显闭环就是最完整的 Firebase React 集成小样本。测试如何验证注水效果app/fixtures/workflow/steps.json 提供本地工作流数据而 test/02_components/03_roadmap.spec.js 验证注水结果第 11 行测试文件先调用roadmapHydrate()再断言——和入口文件的顺序一致断言store.getState().features.length大于 2且categoryFilter、searchText保持默认值用 Enzyme 的shallow/render验证.roadmap、.search-filter、.feature等 DOM 结构值得注意测试直接 import 生产 store而非新建 mock store让测试环境与真实应用共享同一套注水代码减少测试绿了、线上却空的偏差。核心要点速查清单模式位置一句话总结数据注水app/fixtures/roadmap/roadmapHydrate.js循环 dispatch 批量灌入 storestore 组装app/store/roadmap.jsapp/reducers/roadmapApp.js3 行建 storecombineReducers 合并单向数据流app/actions/roadmap.js→app/reducers/roadmap.jsaction creator → dispatch → reducer 追加Firebase 初始化app/fixtures/rsdb.js导出firebaseApp与rsdb两个实例路由级注入app/index.jsx的Route自定义属性随route对象下发实时/单次读取app/components/WorkflowFire.jsxon(value)与once(value)一键切换集成测试test/02_components/03_roadmap.spec.js先注水再断言状态树与 DOM带走什么这两个技巧——入口处批量注水 与 Route 参数携带依赖——在 React Router 3/4 时代的真实项目里非常常见。读懂 React Speed Coding 的这几百行源码你就拿到了一个 Redux Firebase 集成的最小可参考范本。【免费下载链接】reactspeedcoding:rocket: Learn React with 30 reusable components, 15 chapters, and 3 single page apps. Fast start project with JavaScript ES6. React Hot Loading. React Router. Redux. PostCSS, FlexBox styling. Firebase database. Webpack packaging. Enzyme, Mocha, Chai BDD testing. ESLint and StyleLint. Browsersync.项目地址: https://gitcode.com/gh_mirrors/re/reactspeedcoding创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考