企业官网建设流程全解析

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/reactspeedcoding

React 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 就是一个带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_ALL
• searchText：搜索框内容，默认值''
• features：功能条目数组，默认值[]

注意每个 reducer 的第一个参数都带默认值——这就是 Redux 的“初始状态”约定。以features为例，收到LIKE_FEATURE时它不修改原数组，而是用map返回一个“likes + 1”的新数组，这就是不可变性（immutability）原则，也是 Redux 时间旅行调试的基础。

第 3 步：用 combineReducers 组装 store

两个文件各司其职：

1. app/reducers/roadmapApp.js：调用combineReducers(reducers)，把 3 个分支 reducer 合并成一个根 reducer；
2. app/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

跑一下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