Redux實戰(zhàn)

目    錄
第1章  Redux介紹   1
1.1  什么是狀態(tài)   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  可預(yù)測性   11
1.4.2  開發(fā)者體驗   11
1.4.3  可測試性   11
1.4.4  學(xué)習(xí)曲線   11
1.4.5  體積   11
1.5  何時應(yīng)該使用Redux   12
1.6  Redux的備選方案   12
1.6.1  Flux的一些實現(xiàn)   12
1.6.2  MobX   13
1.6.3  GraphQL客戶端   14
1.7  本章小結(jié)   14
第2章  個Redux應(yīng)用程序   15
2.1  創(chuàng)建一個任務(wù)管理應(yīng)用程序   16
2.2  使用Create React App   17
2.3  基本的React組件   19
2.4  重溫Redux架構(gòu)   21
2.5  配置Redux store   22
2.5.1  整體和store API   22
2.5.2  創(chuàng)建Redux store   23
2.5.3  tasks reducer   24
2.5.4  默認reducer狀態(tài)   25
2.6  使用react-redux連接Redux與React   26
2.6.1  添加Provider組件   26
2.6.2  將數(shù)據(jù)從Redux傳遞到React組件   27
2.6.3  容器組件和展示型組件   29
2.7  派發(fā)action   29
2.8  action創(chuàng)建器   33
2.8.1  使用action創(chuàng)建器   34
2.8.2  action創(chuàng)建器和副作用   35
2.9  使用reducer處理action   36
2.10  練習(xí)   38
2.11  解決方案   39
2.11.1  狀態(tài)下拉菜單   39
2.11.2  派發(fā)一個edit action   40
2.11.3  在reducer中處理action   42
2.12  本章小結(jié)   43
第3章  調(diào)試Redux應(yīng)用程序   45
3.1  Redux DevTools 介紹   46
3.2  時間旅行調(diào)試   47
3.3  使用DevTools監(jiān)視器可視化變更   48
3.4  實現(xiàn)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維持局部組件狀態(tài)   55
3.8  練習(xí)   55
3.9  解決方案   56
3.10  本章小結(jié)   57
第4章  使用API   59
4.1  異步action   60
4.2  使用redux-thunk調(diào)用異步action   62
4.2.1  從服務(wù)器獲取任務(wù)   62
4.2.2  API客戶端   66
4.2.3  視圖action和服務(wù)器action   67
4.3  將任務(wù)保存到服務(wù)器   68
4.4  練習(xí)   70
4.5  解決方案   71
4.6  加載狀態(tài)   72
4.6.1  請求生命周期   73
4.6.2  添加加載指示符   74
4.7  錯誤處理   78
4.8  本章小結(jié)   82
第5章  中間件   83
5.1  初窺中間件   84
5.2  中間件的基礎(chǔ)知識   85
5.3  日志記錄中間件   86
5.3.1  創(chuàng)建日志記錄中間件   86
5.3.2  使用applyMiddleware注冊中間件   88
5.4  數(shù)據(jù)分析中間件   89
5.4.1  meta屬性   89
5.4.2  添加數(shù)據(jù)分析中間件   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  發(fā)起AJAX調(diào)用   100
5.5.4  更新reducer   101
5.5.5  API中間件總結(jié)   102
5.6  練習(xí)   102
5.7  解決方案   102
5.8  本章小結(jié)   105
第6章  處理復(fù)雜的副作用   107
6.1  什么是副作用   108
6.2  回顧thunk   109
6.2.1  優(yōu)勢   109
6.2.2  不足   110
6.3  saga介紹   110
6.3.1  優(yōu)勢   111
6.3.2  不足   111
6.4  生成器概述   111
6.4.1  生成器語法   112
6.4.2  迭代器   113
6.4.3  生成器循環(huán)   113
6.4.4  使用生成器的原因   114
6.5  實現(xiàn)saga   115
6.5.1  將saga中間件連接至store   115
6.5.2  根saga介紹   116
6.5.3  副作用   118
6.5.4  響應(yīng)并派發(fā)action   118
6.6  處理長時間運行的進程   121
6.6.1  準備數(shù)據(jù)   121
6.6.2  更新用戶界面   122
6.6.3  派發(fā)action   122
6.6.4  編寫長時間運行的進程   123
6.6.5  處理reducer中的action   124
6.6.6  使用通道   125
6.7  練習(xí)   127
6.8  解決方案   127
6.9  其他的副作用管理策略   128
6.9.1  使用async/await異步函數(shù)   129
6.9.2  使用redux-promise 處理promise   129
6.9.3  redux-loop   129
6.9.4  redux-observable   130
6.10  本章小結(jié)   130
第7章  為組件準備數(shù)據(jù)   131
7.1  將Redux與React組件解耦   132
7.2  選擇器概述   134
7.3  實現(xiàn)搜索   135
7.3.1  搭建UI   136
7.3.2  本地狀態(tài)與Redux狀態(tài)   138
7.3.3  派發(fā)過濾器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  實現(xiàn)reselect   146
7.6  練習(xí)   147
7.7  解決方案   148
7.8  本章小結(jié)   150
第8章  組織Redux store   151
8.1  如何在Redux中存儲數(shù)據(jù)   152
8.2  規(guī)范化數(shù)據(jù)介紹   154
8.3  使用嵌套數(shù)據(jù)實現(xiàn)項目   155
8.3.1  概述：請求與渲染項目   156
8.3.2  使用項目數(shù)據(jù)更新服務(wù)器   159
8.3.3  添加和派發(fā)fetchProjects   160
8.3.4  更新 reducer   162
8.3.5  更新mapStateToProps和選擇器   164
8.3.6  添加項目下拉菜單   165
8.3.7  編輯任務(wù)   169
8.3.8  非必要的渲染   170
8.3.9  總結(jié)——嵌套數(shù)據(jù)   172
8.4  規(guī)范化項目和任務(wù)   172
8.4.1  定義模式   174
8.4.2  更新reducer以處理實體   175
8.4.3  更新選擇器   177
8.4.4  創(chuàng)建任務(wù)   178
8.4.5  總結(jié)——規(guī)范化數(shù)據(jù)   180
8.5  組織其他類型的狀態(tài)   180
8.6  練習(xí)   180
8.7  解決方案   180
8.8  本章小結(jié)   182
第9章  測試Redux應(yīng)用程序   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的區(qū)別   189
9.3  測試action創(chuàng)建器   189
9.3.1  測試同步action創(chuàng)建器   190
9.3.2  測試異步action創(chuàng)建器   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  練習(xí)   210
9.10  解決方案   211
9.11  本章小結(jié)   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開發(fā)者工具   218
10.2  React優(yōu)化   219
10.2.1  shouldComponent-Update   219
10.2.2  PureComponent   220
10.2.3  分頁和其他策略   220
10.3  Redux優(yōu)化   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高級用法的經(jīng)驗法則   230
10.3.7  批量處理action   231
10.4  緩存   233
10.5  練習(xí)   234
10.6  解決方案   236
10.7  本章小結(jié)   240
第11章  組織Redux代碼   241
11.1  Rails風(fēng)格模式   242
11.1.1  優(yōu)勢   243
11.1.2  劣勢   244
11.2  域風(fēng)格模式   244
11.2.1  優(yōu)勢   246
11.2.2  劣勢   246
11.3  ducks模式   246
11.3.1  優(yōu)勢   249
11.3.2  劣勢   249
11.4  選擇器   249
11.5  saga   249
11.6  樣式文件   250
11.7  測試文件   250
11.8  練習(xí)和解決方案   250
11.9  本章小結(jié)   251
第12章  React之外的Redux   253
12.1  移動Redux：React Native   254
12.1.1  處理副作用   254
12.1.2  網(wǎng)絡(luò)連接   254
12.1.3  性能   255
12.2  桌面Redux：Electron   255
12.2.1  需要原生桌面應(yīng)用程序的原因   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  練習(xí)和解決方案   260
12.6  本章小結(jié)   261
附錄  安裝   263