Redux實(shí)戰(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個(gè)原則   6
1.3.2  工作流   6
1.4  為什么要用Redux   11
1.4.1  可預(yù)測(cè)性   11
1.4.2  開(kāi)發(fā)者體驗(yàn)   11
1.4.3  可測(cè)試性   11
1.4.4  學(xué)習(xí)曲線(xiàn)   11
1.4.5  體積   11
1.5  何時(shí)應(yīng)該使用Redux   12
1.6  Redux的備選方案   12
1.6.1  Flux的一些實(shí)現(xiàn)   12
1.6.2  MobX   13
1.6.3  GraphQL客戶(hù)端   14
1.7  本章小結(jié)   14
第2章  個(gè)Redux應(yīng)用程序   15
2.1  創(chuàng)建一個(gè)任務(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  默認(rèn)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ā)一個(gè)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  時(shí)間旅行調(diào)試   47
3.3  使用DevTools監(jiān)視器可視化變更   48
3.4  實(shí)現(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客戶(hù)端   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  請(qǐng)求生命周期   73
4.6.2  添加加載指示符   74
4.7  錯(cuò)誤處理   78
4.8  本章小結(jié)   82
第5章  中間件   83
5.1  初窺中間件   84
5.2  中間件的基礎(chǔ)知識(shí)   85
5.3  日志記錄中間件   86
5.3.1  創(chuàng)建日志記錄中間件   86
5.3.2  使用applyMiddleware注冊(cè)中間件   88
5.4  數(shù)據(jù)分析中間件   89
5.4.1  meta屬性   89
5.4.2  添加數(shù)據(jù)分析中間件   90
5.4.3  中間件的使用場(chǎng)合   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)勢(shì)   109
6.2.2  不足   110
6.3  saga介紹   110
6.3.1  優(yōu)勢(shì)   111
6.3.2  不足   111
6.4  生成器概述   111
6.4.1  生成器語(yǔ)法   112
6.4.2  迭代器   113
6.4.3  生成器循環(huán)   113
6.4.4  使用生成器的原因   114
6.5  實(shí)現(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  處理長(zhǎng)時(shí)間運(yùn)行的進(jìn)程   121
6.6.1  準(zhǔn)備數(shù)據(jù)   121
6.6.2  更新用戶(hù)界面   122
6.6.3  派發(fā)action   122
6.6.4  編寫(xiě)長(zhǎng)時(shí)間運(yùn)行的進(jìn)程   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章  為組件準(zhǔn)備數(shù)據(jù)   131
7.1  將Redux與React組件解耦   132
7.2  選擇器概述   134
7.3  實(shí)現(xiàn)搜索   135
7.3.1  搭建UI   136
7.3.2  本地狀態(tài)與Redux狀態(tài)   138
7.3.3  派發(fā)過(guò)濾器action   139
7.3.4  在reducer中處理過(guò)濾器action   141
7.3.5  編寫(xiě)自己的個(gè)選擇器   142
7.4  reselect介紹   144
7.4.1  reselect和memoization   144
7.4.2  reselect與composition   146
7.5  實(shí)現(xiàn)reselect   146
7.6  練習(xí)   147
7.7  解決方案   148
7.8  本章小結(jié)   150
第8章  組織Redux store   151
8.1  如何在Redux中存儲(chǔ)數(shù)據(jù)   152
8.2  規(guī)范化數(shù)據(jù)介紹   154
8.3  使用嵌套數(shù)據(jù)實(shí)現(xiàn)項(xiàng)目   155
8.3.1  概述：請(qǐng)求與渲染項(xiàng)目   156
8.3.2  使用項(xiàng)目數(shù)據(jù)更新服務(wù)器   159
8.3.3  添加和派發(fā)fetchProjects   160
8.3.4  更新 reducer   162
8.3.5  更新mapStateToProps和選擇器   164
8.3.6  添加項(xiàng)目下拉菜單   165
8.3.7  編輯任務(wù)   169
8.3.8  非必要的渲染   170
8.3.9  總結(jié)——嵌套數(shù)據(jù)   172
8.4  規(guī)范化項(xiàng)目和任務(wù)   172
8.4.1  定義模式   174
8.4.2  更新reducer以處理實(shí)體   175
8.4.3  更新選擇器   177
8.4.4  創(chuàng)建任務(wù)   178
8.4.5  總結(jié)——規(guī)范化數(shù)據(jù)   180
8.5  組織其他類(lèi)型的狀態(tài)   180
8.6  練習(xí)   180
8.7  解決方案   180
8.8  本章小結(jié)   182
第9章  測(cè)試Redux應(yīng)用程序   183
9.1  測(cè)試工具介紹   184
9.1.1  Jasmine提供了什么   186
9.1.2  Jest提供什么   187
9.1.3  Jest的替代品   188
9.1.4  使用Enzyme進(jìn)行組件
測(cè)試   188
9.2  測(cè)試Redux和React的區(qū)別   189
9.3  測(cè)試action創(chuàng)建器   189
9.3.1  測(cè)試同步action創(chuàng)建器   190
9.3.2  測(cè)試異步action創(chuàng)建器   191
9.4  測(cè)試saga   193
9.5  測(cè)試中間件   195
9.6  測(cè)試reducer   198
9.7  測(cè)試選擇器   200
9.8  測(cè)試組件   202
9.8.1  測(cè)試展示型組件   202
9.8.2  快照測(cè)試   204
9.8.3  測(cè)試容器組件   206
9.9  練習(xí)   210
9.10  解決方案   211
9.11  本章小結(jié)   213
第10章  性能   215
10.1  性能評(píng)估工具   216
10.1.1  性能時(shí)間線(xiàn)   216
10.1.2  react-addons-perf   217
10.1.3  why-did-you-update   217
10.1.4  React開(kāi)發(fā)者工具   218
10.2  React優(yōu)化   219
10.2.1  shouldComponent-Update   219
10.2.2  PureComponent   220
10.2.3  分頁(yè)和其他策略   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í)用法的經(jīng)驗(yàn)法則   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)勢(shì)   243
11.1.2  劣勢(shì)   244
11.2  域風(fēng)格模式   244
11.2.1  優(yōu)勢(shì)   246
11.2.2  劣勢(shì)   246
11.3  ducks模式   246
11.3.1  優(yōu)勢(shì)   249
11.3.2  劣勢(shì)   249
11.4  選擇器   249
11.5  saga   249
11.6  樣式文件   250
11.7  測(cè)試文件   250
11.8  練習(xí)和解決方案   250
11.9  本章小結(jié)   251
第12章  React之外的Redux   253
12.1  移動(dòng)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  沒(méi)有框架的Redux   260
12.5  練習(xí)和解決方案   260
12.6  本章小結(jié)   261
附錄  安裝   263