描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787302530336丛书名: Web开发经典丛书
通过 Redux,可以在单个简单的对象中管理 Web 应用程序的状态,这实际上能够消除大多数与状态相关的错误。通过使用 Redux 将状态集中存储,可以快速恢复用户会话状态,维护可靠的状态历史记录,还能在界面之间平滑地传输状态。此外,Redux 的状态容器是完全可编程的,能够完全与 React 和其他流行框架集成。
《Redux 实战》是高效管理 Web 应用程序状态的便捷指南。本书围绕通用范例构建,从基于 React 的简单任务管理程序开始。你将通过该程序学习Redux工作流程,处理异步操作,并掌握 Redux DevTools。你将循序渐进地掌握更多 Redux 知识和集中式管理状态的好处。本书还将进一步介绍一些更复杂的示例,包括编写数据分析中间件、调试“时间旅行”以及整体了解 Redux 与其他框架(如Angular和Electron)的集成方式。
● 在现有的 React 应用程序中使用 Redux
● 使用 redux-saga 库处理副作用
● 使用异步 action 处理 API
● React 和 Redux 应用程序的单元测试
目 录
第1章 Redux介绍 1
1.1 什么是状态 2
1.2 什么是Flux 3
1.2.1 action 4
1.2.2 dispatcher 4
1.2.3 store 4
1.2.4 视图 4
1.3 什么是Redux 4
1.3.1 React和Redux 5
1.3.2 3个原则 6
1.3.2 工作流 6
1.4 为什么要用Redux 11
1.4.1 可预测性 11
1.4.2 开发者体验 11
1.4.3 可测试性 11
1.4.4 学习曲线 11
1.4.5 体积 11
1.5 何时应该使用Redux 12
1.6 Redux的备选方案 12
1.6.1 Flux的一些实现 12
1.6.2 MobX 13
1.6.3 GraphQL客户端 14
1.7 本章小结 14
第2章 第一个Redux应用程序 15
2.1 创建一个任务管理应用程序 16
2.2 使用Create React App 17
2.3 基本的React组件 19
2.4 重温Redux架构 21
2.5 配置Redux store 22
2.5.1 整体和store API 22
2.5.2 创建Redux store 23
2.5.3 tasks reducer 24
2.5.4 默认reducer状态 25
2.6 使用react-redux连接Redux与React 26
2.6.1 添加Provider组件 26
2.6.2 将数据从Redux传递到React组件 27
2.6.3 容器组件和展示型组件 29
2.7 派发action 29
2.8 action创建器 33
2.8.1 使用action创建器 34
2.8.2 action创建器和副作用 35
2.9 使用reducer处理action 36
2.10 练习 38
2.11 解决方案 39
2.11.1 状态下拉菜单 39
2.11.2 派发一个edit action 40
2.11.3 在reducer中处理action 42
2.12 本章小结 43
第3章 调试Redux应用程序 45
3.1 Redux DevTools 介绍 46
3.2 时间旅行调试 47
3.3 使用DevTools监视器可视化变更 48
3.4 实现Redux DevTools 49
3.5 Webpack的作用 51
3.6 模块热替换 52
3.6.1 热加载组件 53
3.6.2 热加载reducer 54
3.6.3 模块热替换的局限性 55
3.7 使用React Hot Loader维持局部组件状态 55
3.8 练习 55
3.9 解决方案 56
3.10 本章小结 57
第4章 使用API 59
4.1 异步action 60
4.2 使用redux-thunk调用异步action 62
4.2.1 从服务器获取任务 62
4.2.2 API客户端 66
4.2.3 视图action和服务器action 67
4.3 将任务保存到服务器 68
4.4 练习 70
4.5 解决方案 71
4.6 加载状态 72
4.6.1 请求生命周期 73
4.6.2 添加加载指示符 74
4.7 错误处理 78
4.8 本章小结 82
第5章 中间件 83
5.1 初窥中间件 84
5.2 中间件的基础知识 85
5.3 日志记录中间件 86
5.3.1 创建日志记录中间件 86
5.3.2 使用applyMiddleware注册中间件 88
5.4 数据分析中间件 89
5.4.1 meta属性 89
5.4.2 添加数据分析中间件 90
5.4.3 中间件的使用场合 93
5.4.4 案例分析:如何不使用中间件 93
5.5 API中间件 95
5.5.1 理想的API 96
5.5.2 概述API中间件 98
5.5.3 发起AJAX调用 100
5.5.4 更新reducer 101
5.5.5 API中间件总结 102
5.6 练习 102
5.7 解决方案 102
5.8 本章小结 105
第6章 处理复杂的副作用 107
6.1 什么是副作用 108
6.2 回顾thunk 109
6.2.1 优势 109
6.2.2 不足 110
6.3 saga介绍 110
6.3.1 优势 111
6.3.2 不足 111
6.4 生成器概述 111
6.4.1 生成器语法 112
6.4.2 迭代器 113
6.4.3 生成器循环 113
6.4.4 使用生成器的原因 114
6.5 实现saga 115
6.5.1 将saga中间件连接至store 115
6.5.2 根saga介绍 116
6.5.3 副作用 118
6.5.4 响应并派发action 118
6.6 处理长时间运行的进程 121
6.6.1 准备数据 121
6.6.2 更新用户界面 122
6.6.3 派发action 122
6.6.4 编写长时间运行的进程 123
6.6.5 处理reducer中的action 124
6.6.6 使用通道 125
6.7 练习 127
6.8 解决方案 127
6.9 其他的副作用管理策略 128
6.9.1 使用async/await异步函数 129
6.9.2 使用redux-promise 处理promise 129
6.9.3 redux-loop 129
6.9.4 redux-observable 130
6.10 本章小结 130
第7章 为组件准备数据 131
7.1 将Redux与React组件解耦 132
7.2 选择器概述 134
7.3 实现搜索 135
7.3.1 搭建UI 136
7.3.2 本地状态与Redux状态 138
7.3.3 派发过滤器action 139
7.3.4 在reducer中处理过滤器action 141
7.3.5 编写自己的第一个选择器 142
7.4 reselect介绍 144
7.4.1 reselect和memoization 144
7.4.2 reselect与composition 146
7.5 实现reselect 146
7.6 练习 147
7.7 解决方案 148
7.8 本章小结 150
第8章 组织Redux store 151
8.1 如何在Redux中存储数据 152
8.2 规范化数据介绍 154
8.3 使用嵌套数据实现项目 155
8.3.1 概述:请求与渲染项目 156
8.3.2 使用项目数据更新服务器 159
8.3.3 添加和派发fetchProjects 160
8.3.4 更新 reducer 162
8.3.5 更新mapStateToProps和选择器 164
8.3.6 添加项目下拉菜单 165
8.3.7 编辑任务 169
8.3.8 非必要的渲染 170
8.3.9 总结——嵌套数据 172
8.4 规范化项目和任务 172
8.4.1 定义模式 174
8.4.2 更新reducer以处理实体 175
8.4.3 更新选择器 177
8.4.4 创建任务 178
8.4.5 总结——规范化数据 180
8.5 组织其他类型的状态 180
8.6 练习 180
8.7 解决方案 180
8.8 本章小结 182
第9章 测试Redux应用程序 183
9.1 测试工具介绍 184
9.1.1 Jasmine提供了什么 186
9.1.2 Jest提供什么 187
9.1.3 Jest的替代品 188
9.1.4 使用Enzyme进行组件
测试 188
9.2 测试Redux和React的区别 189
9.3 测试action创建器 189
9.3.1 测试同步action创建器 190
9.3.2 测试异步action创建器 191
9.4 测试saga 193
9.5 测试中间件 195
9.6 测试reducer 198
9.7 测试选择器 200
9.8 测试组件 202
9.8.1 测试展示型组件 202
9.8.2 快照测试 204
9.8.3 测试容器组件 206
9.9 练习 210
9.10 解决方案 211
9.11 本章小结 213
第10章 性能 215
10.1 性能评估工具 216
10.1.1 性能时间线 216
10.1.2 react-addons-perf 217
10.1.3 why-did-you-update 217
10.1.4 React开发者工具 218
10.2 React优化 219
10.2.1 shouldComponent-Update 219
10.2.2 PureComponent 220
10.2.3 分页和其他策略 220
10.3 Redux优化 221
10.3.1 连接正确的组件 221
10.3.2 自上而下的方法 222
10.3.3 将其他组件连接到Redux 223
10.3.4 将connect添加到Header和TasksPage 225
10.3.5 mapStateToProps和记忆型选择器 229
10.3.6 connect高级用法的经验法则 230
10.3.7 批量处理action 231
10.4 缓存 233
10.5 练习 234
10.6 解决方案 236
10.7 本章小结 240
第11章 组织Redux代码 241
11.1 Rails风格模式 242
11.1.1 优势 243
11.1.2 劣势 244
11.2 域风格模式 244
11.2.1 优势 246
11.2.2 劣势 246
11.3 ducks模式 246
11.3.1 优势 249
11.3.2 劣势 249
11.4 选择器 249
11.5 saga 249
11.6 样式文件 250
11.7 测试文件 250
11.8 练习和解决方案 250
11.9 本章小结 251
第12章 React之外的Redux 253
12.1 移动Redux:React Native 254
12.1.1 处理副作用 254
12.1.2 网络连接 254
12.1.3 性能 255
12.2 桌面Redux:Electron 255
12.2.1 需要原生桌面应用程序的原因 255
12.2.2 Electron的工作方式 256
12.2.3 引入Redux至Electron 257
12.3 其他Redux绑定 258
12.3.1 Angular 258
12.3.2 Ember 259
12.4 没有框架的Redux 260
12.5 练习和解决方案 260
12.6 本章小结 261
附录 安装 263
前 言
自2015年年中发布以来,Redux引起了JavaScript世界的关注。从它作为会议演示的概念验证和“只是另一个Flux实现”标签的简单开端,已经发展成为React应用程序中使用最广泛的状态管理解决方案。它也被Angular、Ember和Vue社区采用,并启发了许多模仿品和衍生产品。
我最喜欢引用的一句话是,“Redux是一个通用框架,它提供了足够结构化和足够灵活性的平衡。因此,它为开发人员提供了一个平台,可以让他们为自己的用例构建自定义状态管理,同时能够重用图形化调试器或中间件之类的东西。” 的确,Redux提供了一组基本的工具以供使用,并概述了组织应用程序更新逻辑的一般模式,最终由你来决定如何围绕Redux构建应用程序。你可以设计应用程序的文件结构,编写reducer逻辑,连接组件,并确定要在Redux上使用多少抽象。
Redux的学习曲线有时会很陡峭。对于来自面向对象语言的大多数开发人员来说,函数式编程和不可变性是不熟悉的概念。编写另一个TodoMVC示例并没有真正展示Redux的好处,也不能解决构建“真实”应用程序的问题。但最终的收益是值得的。能够清楚地追踪应用程序中的数据流并了解特定状态变更的位置/时间/原因/方式是非常有价值的,并且良好的Redux使用方式最终会让代码在长期内更易于维护和可预测。
我大部分时间都是Redux维护人员,通过回答问题、改进文档和撰写教程博客来帮助人们学习Redux。在这个过程中,我看过数百种不同的Redux教程。有鉴于此,我非常乐意推荐将《Redux实战》一书作为学习Redux的最佳资源之一。
通过《Redux实战》一书,Marc Garreau 和Will Faurot写了我希望自己写的Redux书籍。它非常全面、实用,并且可以很好地为开发现实世界中的Redux应用程序讲授许多关键的主题。我特别欣赏《Redux实战》所涵盖的领域,并不总是有明确的答案,如构建项目,通过列出利弊,让读者知道这是一个他们可能不得不自己决定的领域。
在当今快速发展的编程世界中,没有一《Redux实战》可以包罗有关工具的所有知识。但是,《Redux实战》将为你打下坚实的基础和对Redux基础知识的理解——各部分如何结合,如何将这些知识用于实际应用程序,以及在何处寻找更多信息。我很高兴看到《Redux实战》出版,并期待你加入Redux社区!
Mark Erikon
Redux核心维护者
评论
还没有评论。