React Speed Coding Redux 完整教程从 actions 到 reducers亲手搭建 Roadmap 状态容器【免费下载链接】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/reactspeedcodingReact Speed Coding 是基于 JavaScript ES6 的 React 快速上手项目内置 30 个可复用组件、15 个章节和 3 个单页应用。本教程以项目里的Roadmap 应用为例带你从 actions 到 reducers亲手搭建一个完整的 Redux 状态容器——全程代码量小、步骤清晰零基础也能跟上 为什么用 React Speed Coding 学 Redux学 Redux 最怕“概念懂了、上手就懵”。这个项目把状态管理的每一步都拆成了独立小文件每个文件只干一件事actions定义“发生了什么”动作类型 动作创建函数reducers定义“状态如何变化”纯函数store把 reducers 组合起来形成全局状态树components用connect把 React 组件接上 store这种拆分正好对应 Redux 的核心数据流单向数据流。你只需读懂 5 个文件就能掌握 Redux 的全部主干流程。第 1 步定义 action 类型与 action creator打开 app/actions/roadmap.js你会看到 Roadmap 应用一共 4 种动作Action 类型触发场景ADD_FEATURE新增一条功能条目SET_CATEGORY_FILTER切换分类筛选按钮LIKE_FEATURE给某条功能点赞SEARCH_TEXT在搜索框输入文字每个 action 就是一个带type字段的普通对象由 action creator 函数生成例如export function setSearchText(text) { return { type: SEARCH_TEXT, text }; }新手提示文件里还导出了两个常量对象CategoryFilters筛选按钮和Categories条目分类避免在代码里到处写魔法字符串这个习惯在真实项目里非常受用。第 2 步编写 reducers让状态可预测打开 app/reducers/roadmap.js这里用switch语句实现了 3 个 reducer分别管理状态树中的 3 个分支categoryFilter当前选中的筛选按钮默认值为SHOW_ALLsearchText搜索框内容默认值features功能条目数组默认值[]注意每个 reducer 的第一个参数都带默认值——这就是 Redux 的“初始状态”约定。以features为例收到LIKE_FEATURE时它不修改原数组而是用map返回一个“likes 1”的新数组这就是不可变性immutability原则也是 Redux 时间旅行调试的基础。第 3 步用 combineReducers 组装 store两个文件各司其职app/reducers/roadmapApp.js调用combineReducers(reducers)把 3 个分支 reducer 合并成一个根 reducerapp/store/roadmap.js调用createStore(roadmapApp)创建全局 store并接入 Redux DevTools 扩展方便你在浏览器里查看每一次状态变更。至此一个独立、可测试的 Redux 状态容器就搭建完成了 ✅ 它不依赖任何 React 代码随时可以被测试或直接复用。第 4 步把 React 组件连接到 Redux组件连接是 Redux 最容易卡住新手的部分。看两个典型写法搜索框app/components/Roadmap/SearchFeature.jsx组件本身不取数据而是在onChange时直接dispatch(setSearchText(...))——“动作只出不进”。筛选按钮app/components/Roadmap/FilterCategoryButton.jsx同时提供了两个函数——mapStateToProps从状态树读出categoryFilter判断当前按钮是否“被选中”mapDispatchToProps把点击事件包装成dispatch(setCategoryFilter(...))最后用connect(mapStateToProps, mapDispatchToProps)(CategoryButton)把纯展示组件CategoryButton升级成容器组件这就是 Redux 官方推荐的展示组件 / 容器组件分层思路。第 5 步注入初始数据Hydrate空数组的features当然不行。app/fixtures/roadmap/roadmapHydrate.js 遍历 app/fixtures/roadmap/features.js 中的 11 条示例数据对每一条调用store.dispatch(actions.addFeature(...))——连初始化数据也走 dispatch这让整个状态变化 100% 可追踪。真实项目中这里通常换成从 Firebase 或 REST API 拉数据。用 Mocha 测试验证你的状态容器React Speed Coding 使用 Enzyme、Mocha、Chai 做 BDD 测试package.json 中npm run test即可运行。重点看 test/02_components/03_roadmap.spec.js先断言初始状态store.getState().searchText应为、categoryFilter应为SHOW_ALL再dispatch一个setCategoryFilter断言状态树已更新最后用Provider store{store}包裹Roadmap /验证 UI 与状态同步渲染这套“先验证状态、再验证 UI”的测试顺序正是 Redux 测试的标准姿势。动手清单5 个文件走一遍 Redux顺序文件职责1app/actions/roadmap.js动作类型 action creator2app/reducers/roadmap.js纯函数 reducer3app/reducers/roadmapApp.jscombineReducers 合并4app/store/roadmap.js创建 store5app/components/Roadmap/connect 连接组件跑一下npm start进入 Roadmap 页面点击筛选按钮、输入搜索词打开 Redux DevTools你就能亲眼看到每一次点击如何变成 action、再流经 reducer 改变状态树——这比读十篇文章都直观。小结Redux 的本质就三步——dispatch action → reducer 产出新状态 → connect 的组件自动更新。把 Roadmap 这个最小完整案例吃透再去写自己的 Redux 应用难度会直线下降。【免费下载链接】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），仅供参考