{"id":3012,"date":"2023-10-28T14:22:55","date_gmt":"2023-10-28T05:22:55","guid":{"rendered":"https:\/\/edu.ujhb.org\/?p=3012"},"modified":"2023-10-28T14:22:56","modified_gmt":"2023-10-28T05:22:56","slug":"angular%e7%8a%b6%e6%80%81%e7%ae%a1%e7%90%86%e6%95%99%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/edu.ujhb.org\/?p=3012","title":{"rendered":"Angular\u72b6\u6001\u7ba1\u7406\u6559\u7a0b"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Angular\u524d\u7aef\u5f00\u53d1\u72b6\u6001\u7ba1\u7406\u6559\u7a0b\u5927\u7eb2<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e00\u7ae0\uff1a\u5f15\u8a00<\/h2>\n\n\n\n<p>1.1 \u72b6\u6001\u7ba1\u7406\u7b80\u4ecb<br>1.2 \u4e3a\u4ec0\u4e48\u9700\u8981\u72b6\u6001\u7ba1\u7406<br>1.3 Angular\u72b6\u6001\u7ba1\u7406\u7684\u91cd\u8981\u6027<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e8c\u7ae0\uff1a\u72b6\u6001\u7ba1\u7406\u6280\u672f\u6982\u89c8<\/h2>\n\n\n\n<p>2.1 Redux<br>2.2 MobX<br>2.3 NgRx<br>2.4 Akita<br>2.5 NgXs<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e09\u7ae0\uff1a\u9009\u62e9\u72b6\u6001\u7ba1\u7406\u6280\u672f<\/h2>\n\n\n\n<p>3.1 \u8bc4\u4f30\u6807\u51c6<br>3.2 \u6bd4\u8f83\u5404\u79cd\u6280\u672f<br>3.3 \u4e3a\u4ec0\u4e48\u9009\u62e9NgRx\uff08\u91cd\u70b9\u6559\u5b66\uff09<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u56db\u7ae0\uff1aNgRx\u57fa\u7840<\/h2>\n\n\n\n<p>4.1 NgRx\u67b6\u6784<br>4.2 Actions<br>4.3 Reducers<br>4.4 Effects<br>4.5 Store<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e94\u7ae0\uff1aNgRx\u8fdb\u9636<\/h2>\n\n\n\n<p>5.1 \u5f02\u6b65\u64cd\u4f5c<br>5.2 \u4e0eAngular\u670d\u52a1\u96c6\u6210<br>5.3 \u6027\u80fd\u4f18\u5316<br>5.4 \u6d4b\u8bd5\u7b56\u7565<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u516d\u7ae0\uff1a\u5b9e\u6218\u793a\u4f8b<\/h2>\n\n\n\n<p>6.1 \u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u5e94\u7528<br>6.2 \u5e94\u7528NgRx\u8fdb\u884c\u72b6\u6001\u7ba1\u7406<br>6.3 \u5206\u6790\u4e0e\u4f18\u5316<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e03\u7ae0\uff1a\u5e38\u89c1\u95ee\u9898\u4e0e\u89e3\u51b3\u65b9\u6848<\/h2>\n\n\n\n<p>7.1 Debugging<br>7.2 \u4e0e\u5176\u4ed6\u5e93\u7684\u96c6\u6210<br>7.3 \u6700\u4f73\u5b9e\u8df5<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u516b\u7ae0\uff1a\u5176\u4ed6\u72b6\u6001\u7ba1\u7406\u6280\u672f\u7b80\u4ecb<\/h2>\n\n\n\n<p>8.1 Redux\u4e0eAngular<br>8.2 MobX\u4e0eAngular<br>8.3 Akita\u4e0eAngular<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e5d\u7ae0\uff1a\u603b\u7ed3<\/h2>\n\n\n\n<p>9.1 \u8bfe\u7a0b\u56de\u987e<br>9.2 \u4e0b\u4e00\u6b65\u5b66\u4e60\u65b9\u5411<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u5341\u7ae0\uff1a\u53c2\u8003\u8d44\u6599\u4e0e\u8fdb\u4e00\u6b65\u5b66\u4e60<\/h2>\n\n\n\n<p>10.1 \u6587\u6863\u4e0e\u6559\u7a0b<br>10.2 \u5728\u7ebf\u8bfe\u7a0b<br>10.3 \u793e\u7fa4\u4e0e\u8bba\u575b<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u672c\u6559\u7a0b\u7684\u5927\u7eb2\u3002\u63a5\u4e0b\u6765\uff0c\u6211\u5c06\u9010\u7ae0\u9010\u8282\u5730\u8fdb\u884c\u8be6\u7ec6\u7684\u6559\u7a0b\u89e3\u91ca\u3002\u6bcf\u6b21\u56de\u7b54\u5c06\u53ea\u8be6\u7ec6\u89e3\u91ca\u4e00\u4e2a\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u8bf7\u786e\u8ba4\u5927\u7eb2\u662f\u5426\u7b26\u5408\u60a8\u7684\u9700\u6c42\uff0c\u7136\u540e\u6211\u4eec\u53ef\u4ee5\u5f00\u59cb\u8be6\u7ec6\u7684\u6559\u7a0b\u7f16\u5199\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e00\u7ae0\uff1a\u5f15\u8a00<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.1 \u72b6\u6001\u7ba1\u7406\u7b80\u4ecb<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u72b6\u6001\u7ba1\u7406\u662f\u524d\u7aef\u5f00\u53d1\u4e2d\u4e00\u4e2a\u81f3\u5173\u91cd\u8981\u7684\u6982\u5ff5\uff0c\u5b83\u6d89\u53ca\u5230\u5982\u4f55\u5b58\u50a8\u3001\u68c0\u7d22\u3001\u64cd\u4f5c\u548c\u66f4\u65b0\u5e94\u7528\u7684\u72b6\u6001\u3002\u5728\u4e00\u4e2a\u590d\u6742\u7684\u524d\u7aef\u5e94\u7528\u4e2d\uff0c\u72b6\u6001\u7ba1\u7406\u53ef\u4ee5\u5e2e\u52a9\u5f00\u53d1\u8005\u66f4\u5bb9\u6613\u5730\u8ffd\u8e2a\u548c\u64cd\u4f5c\u6570\u636e\uff0c\u4ece\u800c\u63d0\u9ad8\u5e94\u7528\u7684\u53ef\u7ef4\u62a4\u6027\u548c\u53ef\u6269\u5c55\u6027\u3002<\/p>\n\n\n\n<p>\u72b6\u6001\u7ba1\u7406\u4e0d\u4ec5\u4ec5\u662f\u5173\u4e8e\u6570\u636e\u5b58\u50a8\u3002\u5b83\u8fd8\u5305\u62ec\u4e86\u6570\u636e\u6d41\u3001\u6570\u636e\u540c\u6b65\u3001\u4ee5\u53ca\u5982\u4f55\u5728\u7ec4\u4ef6\u4e4b\u95f4\u5171\u4eab\u6570\u636e\u3002\u56e0\u6b64\uff0c\u4e00\u4e2a\u597d\u7684\u72b6\u6001\u7ba1\u7406\u89e3\u51b3\u65b9\u6848\u5e94\u8be5\u80fd\u591f\u63d0\u4f9b\u4e00\u79cd\u7ed3\u6784\u5316\u7684\u65b9\u6cd5\u6765\u5904\u7406\u8fd9\u4e9b\u95ee\u9898\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5728Angular\u4e2d\uff0c\u4e00\u4e2a\u7b80\u5355\u7684\u72b6\u6001\u7ba1\u7406\u793a\u4f8b\u53ef\u80fd\u662f\u4f7f\u7528<code>Service<\/code>\u548c<code>RxJS<\/code>\u6765\u521b\u5efa\u4e00\u4e2a\u72b6\u6001\u7ba1\u7406\u670d\u52a1\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>import { Injectable } from '@angular\/core'; import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class StateManagementService { private state = new BehaviorSubject&lt;any&gt;({}); getState() { return this.state.asObservable(); } setState(newState: any) { this.state.next(newState); } }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528\u4e86<code>BehaviorSubject<\/code>\u6765\u5b58\u50a8\u5e94\u7528\u7684\u72b6\u6001\u3002<code>getState()<\/code>\u65b9\u6cd5\u7528\u4e8e\u8ba2\u9605\u72b6\u6001\u7684\u53d8\u5316\uff0c\u800c<code>setState()<\/code>\u65b9\u6cd5\u7528\u4e8e\u66f4\u65b0\u72b6\u6001\u3002<\/p>\n\n\n\n<p>\u8fd9\u53ea\u662f\u72b6\u6001\u7ba1\u7406\u7684\u51b0\u5c71\u4e00\u89d2\uff0c\u63a5\u4e0b\u6765\u7684\u7ae0\u8282\u5c06\u6df1\u5165\u8bb2\u89e3\u66f4\u591a\u9ad8\u7ea7\u7684\u72b6\u6001\u7ba1\u7406\u6280\u672f\u548c\u5de5\u5177\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e00\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1.2 \u4e3a\u4ec0\u4e48\u9700\u8981\u72b6\u6001\u7ba1\u7406<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u6784\u5efa\u590d\u6742\u7684\u524d\u7aef\u5e94\u7528\u65f6\uff0c\u72b6\u6001\u7ba1\u7406\u6210\u4e3a\u4e00\u4e2a\u4e0d\u53ef\u6216\u7f3a\u7684\u90e8\u5206\u3002\u6ca1\u6709\u5408\u9002\u7684\u72b6\u6001\u7ba1\u7406\uff0c\u5e94\u7528\u5c06\u53d8\u5f97\u96be\u4ee5\u7ef4\u62a4\u548c\u6269\u5c55\u3002\u4ee5\u4e0b\u662f\u4e00\u4e9b\u4f7f\u7528\u72b6\u6001\u7ba1\u7406\u7684\u4e3b\u8981\u539f\u56e0\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u7ec4\u4ef6\u901a\u4fe1<\/strong>: \u5728\u5927\u578b\u5e94\u7528\u4e2d\uff0c\u591a\u4e2a\u7ec4\u4ef6\u9700\u8981\u5171\u4eab\u548c\u64cd\u4f5c\u76f8\u540c\u7684\u6570\u636e\u3002\u72b6\u6001\u7ba1\u7406\u63d0\u4f9b\u4e86\u4e00\u79cd\u96c6\u4e2d\u5f0f\u7684\u65b9\u5f0f\u6765\u5b9e\u73b0\u8fd9\u4e00\u70b9\u3002<\/li>\n\n\n\n<li><strong>\u53ef\u7ef4\u62a4\u6027<\/strong>: \u72b6\u6001\u7ba1\u7406\u5c06\u5e94\u7528\u7684\u903b\u8f91\u548c\u72b6\u6001\u96c6\u4e2d\u7ba1\u7406\uff0c\u4f7f\u5f97\u4ee3\u7801\u66f4\u6613\u4e8e\u7ef4\u62a4\u548c\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>\u53ef\u9884\u6d4b\u6027<\/strong>: \u901a\u8fc7\u4f7f\u7528\u72b6\u6001\u7ba1\u7406\uff0c\u5e94\u7528\u7684\u72b6\u6001\u53d8\u5f97\u66f4\u52a0\u53ef\u9884\u6d4b\u3002\u8fd9\u5bf9\u4e8e\u8c03\u8bd5\u548c\u6d4b\u8bd5\u5c24\u4e3a\u91cd\u8981\u3002<\/li>\n\n\n\n<li><strong>\u6027\u80fd\u4f18\u5316<\/strong>: \u72b6\u6001\u7ba1\u7406\u5e93\u901a\u5e38\u63d0\u4f9b\u4e00\u4e9b\u5185\u7f6e\u7684\u6027\u80fd\u4f18\u5316\u673a\u5236\uff0c\u5982\u72b6\u6001\u7f13\u5b58\u3001\u61d2\u52a0\u8f7d\u7b49\u3002<\/li>\n\n\n\n<li><strong>\u5f00\u53d1\u6548\u7387<\/strong>: \u72b6\u6001\u7ba1\u7406\u5e93\u901a\u5e38\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u5de5\u5177\u548c\u4e2d\u95f4\u4ef6\uff0c\u8fd9\u4e9b\u5de5\u5177\u53ef\u4ee5\u5e2e\u52a9\u5f00\u53d1\u8005\u66f4\u9ad8\u6548\u5730\u5f00\u53d1\u5e94\u7528\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a\u8d2d\u7269\u8f66\u5e94\u7528\uff0c\u5176\u4e2d\u5305\u542b\u591a\u4e2a\u7ec4\u4ef6\uff08\u5982\u5546\u54c1\u5217\u8868\u3001\u8d2d\u7269\u8f66\u3001\u7ed3\u7b97\u9875\u9762\u7b49\uff09\u3002\u6ca1\u6709\u72b6\u6001\u7ba1\u7406\uff0c\u6bcf\u4e2a\u7ec4\u4ef6\u90fd\u9700\u8981\u6709\u81ea\u5df1\u7684\u903b\u8f91\u6765\u83b7\u53d6\u548c\u64cd\u4f5c\u8d2d\u7269\u8f66\u6570\u636e\uff0c\u8fd9\u5c06\u5bfc\u81f4\u4ee3\u7801\u5197\u4f59\u548c\u7ef4\u62a4\u56f0\u96be\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ Without state management @Component({ selector: 'app-product-list', \/\/ ... }) export class ProductListComponent { \/\/ Logic to manage cart state } @Component({ selector: 'app-cart', \/\/ ... }) export class CartComponent { \/\/ Duplicate logic to manage cart state }<\/code><\/p>\n\n\n\n<p>\u4f7f\u7528\u72b6\u6001\u7ba1\u7406\uff0c\u6211\u4eec\u53ef\u4ee5\u5c06\u8d2d\u7269\u8f66\u7684\u72b6\u6001\u548c\u903b\u8f91\u96c6\u4e2d\u7ba1\u7406\uff0c\u4ece\u800c\u7b80\u5316\u7ec4\u4ef6\u7684\u4ee3\u7801\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ With state management @Injectable({ providedIn: 'root' }) export class CartStateService { \/\/ Centralized logic to manage cart state }<\/code><\/p>\n\n\n\n<p>\u8fd9\u6837\uff0c\u6240\u6709\u4e0e\u8d2d\u7269\u8f66\u76f8\u5173\u7684\u7ec4\u4ef6\u90fd\u53ef\u4ee5\u4f9d\u8d56\u4e8e\u8fd9\u4e2a\u96c6\u4e2d\u7684<code>CartStateService<\/code>\uff0c\u4ece\u800c\u63d0\u9ad8\u4ee3\u7801\u7684\u53ef\u7ef4\u62a4\u6027\u548c\u53ef\u6269\u5c55\u6027\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e00\u7ae0\u7b2c\u4e8c\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1.3 Angular\u72b6\u6001\u7ba1\u7406\u7684\u91cd\u8981\u6027<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>Angular\u662f\u4e00\u4e2a\u5f3a\u5927\u7684\u524d\u7aef\u6846\u67b6\uff0c\u63d0\u4f9b\u4e86\u8bb8\u591a\u5185\u7f6e\u529f\u80fd\uff0c\u5982\u4f9d\u8d56\u6ce8\u5165\u3001\u6a21\u5757\u5316\u3001\u7ec4\u4ef6\u5316\u7b49\u3002\u7136\u800c\uff0c\u5f53\u5e94\u7528\u89c4\u6a21\u53d8\u5927\uff0c\u7279\u522b\u662f\u5f53\u6d89\u53ca\u5230\u591a\u4e2a\u7ec4\u4ef6\u6216\u591a\u4e2a\u6a21\u5757\u5171\u4eab\u72b6\u6001\u65f6\uff0cAngular\u7684\u5185\u7f6e\u529f\u80fd\u53ef\u80fd\u4e0d\u8db3\u4ee5\u6ee1\u8db3\u9700\u6c42\u3002\u8fd9\u5c31\u662f\u4e3a\u4ec0\u4e48\u72b6\u6001\u7ba1\u7406\u5728Angular\u5e94\u7528\u4e2d\u5c24\u4e3a\u91cd\u8981\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4e0eAngular\u751f\u6001\u7cfb\u7edf\u96c6\u6210<\/strong>: Angular\u6709\u4e00\u7cfb\u5217\u4e13\u95e8\u4e3a\u5176\u8bbe\u8ba1\u7684\u72b6\u6001\u7ba1\u7406\u5e93\uff08\u5982NgRx\u3001NgXs\u7b49\uff09\uff0c\u8fd9\u4e9b\u5e93\u4e0eAngular\u7684\u5176\u4ed6\u90e8\u5206\uff08\u5982RxJS\u3001\u4f9d\u8d56\u6ce8\u5165\u7b49\uff09\u7d27\u5bc6\u96c6\u6210\u3002<\/li>\n\n\n\n<li><strong>\u7c7b\u578b\u5b89\u5168<\/strong>: \u4f7f\u7528TypeScript\u7f16\u5199\u7684Angular\u5e94\u7528\u53ef\u4ee5\u4ece\u72b6\u6001\u7ba1\u7406\u5e93\u4e2d\u83b7\u5f97\u66f4\u597d\u7684\u7c7b\u578b\u5b89\u5168\u6027\u3002<\/li>\n\n\n\n<li><strong>\u54cd\u5e94\u5f0f\u7f16\u7a0b<\/strong>: Angular\u4e0eRxJS\u7d27\u5bc6\u96c6\u6210\uff0c\u4f7f\u5f97\u72b6\u6001\u7ba1\u7406\u53ef\u4ee5\u5f88\u81ea\u7136\u5730\u91c7\u7528\u54cd\u5e94\u5f0f\u7f16\u7a0b\u6a21\u5f0f\u3002<\/li>\n\n\n\n<li><strong>\u6a21\u5757\u5316\u548c\u61d2\u52a0\u8f7d<\/strong>: Angular\u7684\u6a21\u5757\u5316\u4f53\u7cfb\u7ed3\u6784\u5141\u8bb8\u60a8\u5c06\u72b6\u6001\u7ba1\u7406\u903b\u8f91\u5206\u89e3\u4e3a\u591a\u4e2a\u6a21\u5757\uff0c\u5e76\u6839\u636e\u9700\u8981\u8fdb\u884c\u61d2\u52a0\u8f7d\u3002<\/li>\n\n\n\n<li><strong>\u5f00\u53d1\u8005\u5de5\u5177\u548c\u793e\u7fa4\u652f\u6301<\/strong>: Angular\u72b6\u6001\u7ba1\u7406\u5e93\u901a\u5e38\u6709\u4e30\u5bcc\u7684\u5f00\u53d1\u8005\u5de5\u5177\u548c\u5f3a\u5927\u7684\u793e\u7fa4\u652f\u6301\uff0c\u8fd9\u5bf9\u4e8e\u5f00\u53d1\u548c\u7ef4\u62a4\u5927\u578b\u5e94\u7528\u81f3\u5173\u91cd\u8981\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5728Angular\u4e2d\u4f7f\u7528NgRx\u4f5c\u4e3a\u72b6\u6001\u7ba1\u7406\u89e3\u51b3\u65b9\u6848\u7684\u4e00\u4e2a\u7b80\u5355\u793a\u4f8b\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { StoreModule } from '@ngrx\/store'; import { counterReducer } from '.\/counter.reducer'; @NgModule({ imports: [ StoreModule.forRoot({ count: counterReducer }) ], \/\/ ... }) export class AppModule { }<\/code><\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ counter.reducer.ts export function counterReducer(state = 0, action: Action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u7b80\u5355\u7684\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528NgRx\u7684<code>StoreModule<\/code>\u6765\u521b\u5efa\u4e00\u4e2a\u5168\u5c40\u72b6\u6001\uff0c\u5e76\u4f7f\u7528\u4e00\u4e2a\u7b80\u5355\u7684reducer\u6765\u7ba1\u7406<code>count<\/code>\u72b6\u6001\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e00\u7ae0\u7b2c\u4e09\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u7ae0\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e8c\u7ae0\uff1a\u72b6\u6001\u7ba1\u7406\u6280\u672f\u6982\u89c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">2.1 Redux<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>Redux \u662f\u4e00\u79cd\u6d41\u884c\u7684 JavaScript \u72b6\u6001\u7ba1\u7406\u5e93\uff0c\u5c3d\u7ba1\u5b83\u6700\u521d\u662f\u4e3a React \u5e94\u7528\u7a0b\u5e8f\u8bbe\u8ba1\u7684\uff0c\u4f46\u4e5f\u53ef\u4ee5\u4e0e Angular \u96c6\u6210\u3002Redux \u57fa\u4e8e Flux \u67b6\u6784\uff0c\u63d0\u4f9b\u4e86\u4e00\u79cd\u5355\u4e00\u53ef\u9884\u6d4b\u7684\u72b6\u6001\u6811\u6765\u7ba1\u7406\u5e94\u7528\u72b6\u6001\u3002<\/p>\n\n\n\n<p>Redux \u7684\u6838\u5fc3\u6982\u5ff5\u5305\u62ec\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Store<\/strong>: \u4e00\u4e2a\u5b58\u50a8\u6574\u4e2a\u5e94\u7528\u72b6\u6001\u7684\u5bf9\u8c61\u3002<\/li>\n\n\n\n<li><strong>Action<\/strong>: \u63cf\u8ff0\u53d1\u751f\u4e86\u4ec0\u4e48\u7684\u5bf9\u8c61\u3002<\/li>\n\n\n\n<li><strong>Reducer<\/strong>: \u6839\u636e\u5f53\u524d\u72b6\u6001\u548c\u4e00\u4e2a\u52a8\u4f5c\u6765\u8ba1\u7b97\u65b0\u72b6\u6001\u7684\u51fd\u6570\u3002<\/li>\n<\/ol>\n\n\n\n<p>Redux \u7684\u4f18\u70b9\u5305\u62ec\u7b80\u5355\u6027\u3001\u53ef\u9884\u6d4b\u6027\u548c\u5f3a\u5927\u7684\u793e\u7fa4\u652f\u6301\u3002\u7136\u800c\uff0c\u5b83\u53ef\u80fd\u4f1a\u5f15\u5165\u4e00\u4e9b\u6a21\u677f\u4ee3\u7801\uff0c\u8fd9\u5728\u5927\u578b\u5e94\u7528\u4e2d\u53ef\u80fd\u4f1a\u6210\u4e3a\u95ee\u9898\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5728 Angular \u4e2d\u4f7f\u7528 Redux \u7684\u4e00\u4e2a\u7b80\u5355\u793a\u4f8b\uff1a<\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u5b89\u88c5 Redux \u548c Angular-Redux \u5e93\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install redux @angular-redux\/store --save<\/code><\/p>\n\n\n\n<p>\u7136\u540e\u5728 Angular \u6a21\u5757\u4e2d\u914d\u7f6e Store\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { NgReduxModule, NgRedux } from '@angular-redux\/store'; import { rootReducer } from '.\/reducers'; @NgModule({ imports: [NgReduxModule], \/\/ ... }) export class AppModule { constructor(ngRedux: NgRedux&lt;IAppState&gt;) { ngRedux.configureStore(rootReducer, {}); } }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528 <code>NgReduxModule<\/code> \u548c <code>NgRedux<\/code> \u670d\u52a1\u6765\u914d\u7f6e Redux store\uff0c\u5e76\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a <code>rootReducer<\/code> \u7684 reducer \u51fd\u6570\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e8c\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.2 MobX<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>MobX \u662f\u53e6\u4e00\u79cd\u6d41\u884c\u7684\u72b6\u6001\u7ba1\u7406\u5e93\uff0c\u5b83\u63d0\u4f9b\u4e86\u4e00\u79cd\u66f4\u52a0\u7075\u6d3b\u548c\u76f4\u89c2\u7684\u65b9\u5f0f\u6765\u7ba1\u7406\u5e94\u7528\u72b6\u6001\u3002\u4e0e Redux \u4e0d\u540c\uff0cMobX \u4f7f\u7528\u54cd\u5e94\u5f0f\u7f16\u7a0b\u6982\u5ff5\uff0c\u5141\u8bb8\u60a8\u521b\u5efa\u53ef\u89c2\u5bdf\u7684\u72b6\u6001\u53d8\u91cf\uff0c\u5e76\u81ea\u52a8\u8ffd\u8e2a\u5b83\u4eec\u7684\u4f9d\u8d56\u5173\u7cfb\u3002<\/p>\n\n\n\n<p>MobX \u7684\u6838\u5fc3\u6982\u5ff5\u5305\u62ec\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Observable<\/strong>: \u53ef\u89c2\u5bdf\u7684\u72b6\u6001\u53d8\u91cf\u3002<\/li>\n\n\n\n<li><strong>Action<\/strong>: \u7528\u4e8e\u4fee\u6539\u72b6\u6001\u7684\u51fd\u6570\u3002<\/li>\n\n\n\n<li><strong>Computed<\/strong>: \u6839\u636e\u5176\u4ed6\u53ef\u89c2\u5bdf\u53d8\u91cf\u8ba1\u7b97\u51fa\u7684\u503c\u3002<\/li>\n\n\n\n<li><strong>Reaction<\/strong>: \u5f53\u53ef\u89c2\u5bdf\u53d8\u91cf\u53d1\u751f\u53d8\u5316\u65f6\u81ea\u52a8\u8fd0\u884c\u7684\u526f\u4f5c\u7528\u3002<\/li>\n<\/ol>\n\n\n\n<p>MobX \u7684\u4f18\u70b9\u662f\u5b83\u51cf\u5c11\u4e86\u6a21\u677f\u4ee3\u7801\uff0c\u63d0\u4f9b\u4e86\u66f4\u9ad8\u7684\u7075\u6d3b\u6027\uff0c\u5e76\u5141\u8bb8\u66f4\u5bb9\u6613\u5730\u521b\u5efa\u590d\u6742\u7684\u72b6\u6001\u903b\u8f91\u3002\u7136\u800c\uff0c\u5b83\u53ef\u80fd\u4e0d\u5982 Redux \u90a3\u6837\u7ed3\u6784\u5316\uff0c\u8fd9\u5728\u5927\u578b\u5e94\u7528\u4e2d\u53ef\u80fd\u4f1a\u5bfc\u81f4\u95ee\u9898\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5728 Angular \u4e2d\u4f7f\u7528 MobX \u7684\u4e00\u4e2a\u7b80\u5355\u793a\u4f8b\uff1a<\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u5b89\u88c5 MobX \u548c mobx-angular \u5e93\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install mobx mobx-angular --save<\/code><\/p>\n\n\n\n<p>\u7136\u540e\u521b\u5efa\u4e00\u4e2a MobX store\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ counter.store.ts import { observable, action } from 'mobx'; export class CounterStore { @observable count = 0; @action increment() { this.count++; } @action decrement() { this.count--; } }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528 <code>@observable<\/code> \u88c5\u9970\u5668\u6765\u521b\u5efa\u4e00\u4e2a\u53ef\u89c2\u5bdf\u7684 <code>count<\/code> \u53d8\u91cf\uff0c\u5e76\u4f7f\u7528 <code>@action<\/code> \u88c5\u9970\u5668\u6765\u5b9a\u4e49\u4fee\u6539\u72b6\u6001\u7684\u65b9\u6cd5\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e8c\u7ae0\u7b2c\u4e8c\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.3 NgRx<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>NgRx \u662f\u4e13\u4e3a Angular \u5e94\u7528\u7a0b\u5e8f\u8bbe\u8ba1\u7684\u72b6\u6001\u7ba1\u7406\u5e93\uff0c\u5b83\u57fa\u4e8e Redux \u67b6\u6784\u5e76\u4f7f\u7528 RxJS \u8fdb\u884c\u54cd\u5e94\u5f0f\u7f16\u7a0b\u3002\u7531\u4e8e NgRx \u662f\u4e3a Angular \u5b9a\u5236\u7684\uff0c\u56e0\u6b64\u5b83\u4e0e Angular \u7684\u5176\u4ed6\u529f\u80fd\uff08\u5982\u4f9d\u8d56\u6ce8\u5165\u3001\u6a21\u5757\u5316\u7b49\uff09\u975e\u5e38\u597d\u5730\u96c6\u6210\u3002<\/p>\n\n\n\n<p>NgRx \u7684\u6838\u5fc3\u6982\u5ff5\u5305\u62ec\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Store<\/strong>: \u4e00\u4e2a\u4e0d\u53ef\u53d8\u7684\u72b6\u6001\u5bb9\u5668\u3002<\/li>\n\n\n\n<li><strong>Actions<\/strong>: \u63cf\u8ff0\u72b6\u6001\u5982\u4f55\u6539\u53d8\u7684\u5bf9\u8c61\u3002<\/li>\n\n\n\n<li><strong>Reducers<\/strong>: \u7eaf\u51fd\u6570\uff0c\u6839\u636e\u5f53\u524d\u72b6\u6001\u548c\u4e00\u4e2a\u52a8\u4f5c\u6765\u8ba1\u7b97\u65b0\u72b6\u6001\u3002<\/li>\n\n\n\n<li><strong>Effects<\/strong>: \u7528\u4e8e\u5904\u7406\u5f02\u6b65\u64cd\u4f5c\u548c\u4e0e\u5916\u90e8\u8d44\u6e90\u4ea4\u4e92\u7684\u6a21\u5757\u3002<\/li>\n\n\n\n<li><strong>Selectors<\/strong>: \u7528\u4e8e\u4ece\u72b6\u6001\u6811\u4e2d\u9009\u62e9\u548c\u7ec4\u5408\u6570\u636e\u7684\u7eaf\u51fd\u6570\u3002<\/li>\n<\/ol>\n\n\n\n<p>NgRx \u7684\u4f18\u70b9\u662f\u5b83\u63d0\u4f9b\u4e86\u4e00\u79cd\u7ed3\u6784\u5316\u3001\u53ef\u9884\u6d4b\u548c\u9ad8\u6548\u7684\u65b9\u5f0f\u6765\u7ba1\u7406\u72b6\u6001\uff0c\u7279\u522b\u662f\u5728\u5927\u578b\u548c\u590d\u6742\u7684 Angular \u5e94\u7528\u4e2d\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5728 Angular \u4e2d\u4f7f\u7528 NgRx \u7684\u4e00\u4e2a\u7b80\u5355\u793a\u4f8b\uff1a<\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u5b89\u88c5 NgRx \u5e93\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install @ngrx\/store --save<\/code><\/p>\n\n\n\n<p>\u7136\u540e\u5728 Angular \u6a21\u5757\u4e2d\u5bfc\u5165 <code>StoreModule<\/code>\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { StoreModule } from '@ngrx\/store'; import { counterReducer } from '.\/counter.reducer'; @NgModule({ imports: [ StoreModule.forRoot({ count: counterReducer }) ], \/\/ ... }) export class AppModule { }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528 <code>StoreModule.forRoot()<\/code> \u65b9\u6cd5\u6765\u914d\u7f6e NgRx store\uff0c\u5e76\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a <code>counterReducer<\/code> \u7684 reducer \u51fd\u6570\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e8c\u7ae0\u7b2c\u4e09\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.4 Akita<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>Akita \u662f\u4e00\u4e2a\u76f8\u5bf9\u8f83\u65b0\u4f46\u65e5\u76ca\u53d7\u6b22\u8fce\u7684\u72b6\u6001\u7ba1\u7406\u5e93\uff0c\u4e13\u4e3a Angular \u5e94\u7528\u7a0b\u5e8f\u8bbe\u8ba1\u3002\u4e0e NgRx \u6216 Redux \u4e0d\u540c\uff0cAkita \u4e0d\u5f3a\u5236\u4f7f\u7528\u4e0d\u53ef\u53d8\u72b6\u6001\u6216\u7eaf\u51fd\u6570\uff0c\u8fd9\u4f7f\u5f97\u5b83\u66f4\u52a0\u7075\u6d3b\u548c\u6613\u4e8e\u4f7f\u7528\u3002<\/p>\n\n\n\n<p>Akita \u7684\u6838\u5fc3\u6982\u5ff5\u5305\u62ec\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Store<\/strong>: \u5b58\u50a8\u5e94\u7528\u72b6\u6001\u7684\u5bb9\u5668\u3002<\/li>\n\n\n\n<li><strong>Query<\/strong>: \u7528\u4e8e\u4ece Store \u4e2d\u68c0\u7d22\u72b6\u6001\u7684\u5bf9\u8c61\u3002<\/li>\n\n\n\n<li><strong>Service<\/strong>: \u5305\u542b\u7528\u4e8e\u4e0e Store \u4ea4\u4e92\u7684\u903b\u8f91\u7684\u7c7b\u3002<\/li>\n\n\n\n<li><strong>Entity<\/strong>: \u4e00\u4e2a\u6216\u591a\u4e2a\u5bf9\u8c61\u7684\u6a21\u578b\uff0c\u901a\u5e38\u7528\u4e8e\u5217\u8868\u548c\u96c6\u5408\u3002<\/li>\n<\/ol>\n\n\n\n<p>Akita \u7684\u4f18\u70b9\u662f\u5b83\u7b80\u5355\u3001\u9ad8\u6548\uff0c\u5e76\u4e14\u4e0e Angular \u5f88\u597d\u5730\u96c6\u6210\u3002\u5b83\u7279\u522b\u9002\u7528\u4e8e\u9700\u8981\u5feb\u901f\u5f00\u53d1\u548c\u539f\u578b\u5236\u4f5c\u7684\u9879\u76ee\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5728 Angular \u4e2d\u4f7f\u7528 Akita \u7684\u4e00\u4e2a\u7b80\u5355\u793a\u4f8b\uff1a<\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u5b89\u88c5 Akita \u5e93\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install @datorama\/akita --save<\/code><\/p>\n\n\n\n<p>\u7136\u540e\u521b\u5efa\u4e00\u4e2a Akita Store\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ counter.store.ts import { Store, StoreConfig } from '@datorama\/akita'; export interface CounterState { count: number; } @StoreConfig({ name: 'counter' }) export class CounterStore extends Store&lt;CounterState&gt; { constructor() { super({ count: 0 }); } }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528 <code>@StoreConfig<\/code> \u88c5\u9970\u5668\u548c <code>Store<\/code> \u7c7b\u6765\u521b\u5efa\u4e00\u4e2a Akita Store\u3002\u6211\u4eec\u8fd8\u5b9a\u4e49\u4e86\u4e00\u4e2a <code>CounterState<\/code> \u63a5\u53e3\u6765\u63cf\u8ff0\u72b6\u6001\u7684\u5f62\u72b6\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e8c\u7ae0\u7b2c\u56db\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.5 NgXs<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>NgXs\uff08\u8bfb\u4f5c &#8220;Ng Excess&#8221;\uff09\u662f\u53e6\u4e00\u4e2a\u4e3a Angular \u5e94\u7528\u7a0b\u5e8f\u8bbe\u8ba1\u7684\u72b6\u6001\u7ba1\u7406\u5e93\u3002\u5b83\u65e8\u5728\u63d0\u4f9b\u4e00\u79cd\u7b80\u5355\u3001\u6a21\u578b\u9a71\u52a8\u7684\u65b9\u6cd5\u6765\u5904\u7406\u72b6\u6001\uff0c\u540c\u65f6\u8fd8\u63d0\u4f9b\u4e86\u4e00\u4e9b\u9ad8\u7ea7\u529f\u80fd\uff0c\u5982\u72b6\u6001\u5feb\u7167\u548c\u5f02\u6b65\u64cd\u4f5c\u3002<\/p>\n\n\n\n<p>NgXs \u7684\u6838\u5fc3\u6982\u5ff5\u5305\u62ec\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>State<\/strong>: \u63cf\u8ff0\u5e94\u7528\u72b6\u6001\u7684\u7c7b\u6216\u63a5\u53e3\u3002<\/li>\n\n\n\n<li><strong>Actions<\/strong>: \u7528\u4e8e\u89e6\u53d1\u72b6\u6001\u66f4\u6539\u7684\u7c7b\u3002<\/li>\n\n\n\n<li><strong>Selectors<\/strong>: \u7528\u4e8e\u4ece\u72b6\u6001\u4e2d\u9009\u62e9\u6570\u636e\u7684\u51fd\u6570\u3002<\/li>\n\n\n\n<li><strong>Plugins<\/strong>: \u7528\u4e8e\u6269\u5c55 NgXs \u529f\u80fd\u7684\u6a21\u5757\u3002<\/li>\n<\/ol>\n\n\n\n<p>NgXs \u7684\u4f18\u70b9\u662f\u5b83\u975e\u5e38\u6613\u4e8e\u4e0a\u624b\uff0c\u7279\u522b\u662f\u5bf9\u4e8e\u90a3\u4e9b\u5df2\u7ecf\u719f\u6089 Angular \u548c\u9762\u5411\u5bf9\u8c61\u7f16\u7a0b\u7684\u5f00\u53d1\u8005\u3002\u5b83\u8fd8\u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u63d2\u4ef6\u6765\u652f\u6301\u5982\u8868\u5355\u7ba1\u7406\u3001\u8def\u7531\u7ba1\u7406\u7b49\u5e38\u89c1\u9700\u6c42\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5728 Angular \u4e2d\u4f7f\u7528 NgXs \u7684\u4e00\u4e2a\u7b80\u5355\u793a\u4f8b\uff1a<\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u5b89\u88c5 NgXs \u5e93\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install @ngxs\/store --save<\/code><\/p>\n\n\n\n<p>\u7136\u540e\u5728 Angular \u6a21\u5757\u4e2d\u5bfc\u5165 <code>NgxsModule<\/code>\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { NgxsModule } from '@ngxs\/store'; import { CounterState } from '.\/counter.state'; @NgModule({ imports: [ NgxsModule.forRoot([ CounterState ]) ], \/\/ ... }) export class AppModule { }<\/code><\/p>\n\n\n\n<p>\u521b\u5efa\u4e00\u4e2a\u72b6\u6001\u6a21\u578b\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ counter.state.ts import { State, Action, StateContext } from '@ngxs\/store'; export class Increment { static readonly type = '[Counter] Increment'; } @State&lt;number&gt;({ name: 'count', defaults: 0 }) export class CounterState { @Action(Increment) increment(ctx: StateContext&lt;number&gt;) { const state = ctx.getState(); ctx.setState(state + 1); } }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528 <code>@State<\/code> \u548c <code>@Action<\/code> \u88c5\u9970\u5668\u6765\u5b9a\u4e49\u4e00\u4e2a\u72b6\u6001\u6a21\u578b\u548c\u4e00\u4e2a\u52a8\u4f5c\u3002\u7136\u540e\uff0c\u6211\u4eec\u5728 <code>NgxsModule.forRoot()<\/code> \u65b9\u6cd5\u4e2d\u6ce8\u518c\u8fd9\u4e2a\u72b6\u6001\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e8c\u7ae0\u7b2c\u4e94\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u7ae0\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e09\u7ae0\uff1a\u9009\u62e9\u72b6\u6001\u7ba1\u7406\u6280\u672f<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.1 \u8bc4\u4f30\u6807\u51c6<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u9009\u62e9\u5408\u9002\u7684\u72b6\u6001\u7ba1\u7406\u6280\u672f\u662f\u4e00\u4e2a\u91cd\u8981\u7684\u51b3\u7b56\uff0c\u56e0\u4e3a\u5b83\u5c06\u5f71\u54cd\u6574\u4e2a\u5e94\u7528\u7684\u67b6\u6784\u548c\u5f00\u53d1\u6d41\u7a0b\u3002\u5728\u505a\u51fa\u9009\u62e9\u4e4b\u524d\uff0c\u60a8\u5e94\u8be5\u6839\u636e\u4ee5\u4e0b\u51e0\u4e2a\u6807\u51c6\u8fdb\u884c\u8bc4\u4f30\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4e0e\u6846\u67b6\u7684\u96c6\u6210\u7a0b\u5ea6<\/strong>: \u67d0\u4e9b\u72b6\u6001\u7ba1\u7406\u5e93\uff08\u5982 NgRx \u548c NgXs\uff09\u662f\u4e13\u4e3a Angular \u8bbe\u8ba1\u7684\uff0c\u56e0\u6b64\u4e0e Angular \u7684\u5176\u4ed6\u529f\u80fd\uff08\u5982\u4f9d\u8d56\u6ce8\u5165\u3001\u6a21\u5757\u5316\u7b49\uff09\u6709\u66f4\u597d\u7684\u96c6\u6210\u3002<\/li>\n\n\n\n<li><strong>\u5b66\u4e60\u66f2\u7ebf<\/strong>: \u4e0d\u540c\u7684\u72b6\u6001\u7ba1\u7406\u5e93\u6709\u4e0d\u540c\u7684\u590d\u6742\u6027\u548c\u5b66\u4e60\u66f2\u7ebf\u3002\u4f8b\u5982\uff0cRedux \u548c NgRx \u901a\u5e38\u9700\u8981\u66f4\u591a\u7684\u65f6\u95f4\u6765\u638c\u63e1\uff0c\u800c MobX \u548c Akita \u5219\u76f8\u5bf9\u66f4\u5bb9\u6613\u4e0a\u624b\u3002<\/li>\n\n\n\n<li><strong>\u793e\u7fa4\u652f\u6301\u548c\u6587\u6863<\/strong>: \u4e00\u4e2a\u6d3b\u8dc3\u7684\u793e\u7fa4\u548c\u4e30\u5bcc\u7684\u6587\u6863\u901a\u5e38\u610f\u5473\u7740\u66f4\u597d\u7684\u652f\u6301\u548c\u66f4\u591a\u7684\u7b2c\u4e09\u65b9\u5e93\u3002<\/li>\n\n\n\n<li><strong>\u6027\u80fd\u548c\u4f18\u5316<\/strong>: \u67d0\u4e9b\u5e93\u63d0\u4f9b\u4e86\u9ad8\u7ea7\u7684\u6027\u80fd\u4f18\u5316\u529f\u80fd\uff0c\u5982\u61d2\u52a0\u8f7d\u3001\u72b6\u6001\u6301\u4e45\u5316\u7b49\u3002<\/li>\n\n\n\n<li><strong>\u7075\u6d3b\u6027\u548c\u53ef\u6269\u5c55\u6027<\/strong>: \u6839\u636e\u60a8\u7684\u9879\u76ee\u9700\u6c42\uff0c\u60a8\u53ef\u80fd\u9700\u8981\u4e00\u4e2a\u63d0\u4f9b\u66f4\u591a\u81ea\u7531\u5ea6\u548c\u53ef\u6269\u5c55\u6027\u7684\u5e93\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u8fd9\u4e00\u8282\u4e3b\u8981\u662f\u7406\u8bba\u6027\u7684\uff0c\u56e0\u6b64\u6ca1\u6709\u76f4\u63a5\u76f8\u5173\u7684\u4ee3\u7801\u793a\u4f8b\u3002\u4f46\u60a8\u53ef\u4ee5\u901a\u8fc7\u7b80\u5355\u7684\u4ee3\u7801\u6216\u4f2a\u4ee3\u7801\u6765\u6a21\u62df\u4e0d\u540c\u5e93\u7684\u4f7f\u7528\u65b9\u5f0f\uff0c\u4ee5\u4fbf\u66f4\u597d\u5730\u7406\u89e3\u5b83\u4eec\u7684\u5dee\u5f02\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ Redux-like pseudo-code const newState = reducer(oldState, action); \/\/ MobX-like pseudo-code observableState.property = newValue; \/\/ NgRx-like pseudo-code this.store.dispatch(new SomeAction()); \/\/ Akita-like pseudo-code this.someService.updateState({ key: newValue });<\/code><\/p>\n\n\n\n<p>\u901a\u8fc7\u8fd9\u4e9b\u7b80\u5355\u7684\u793a\u4f8b\uff0c\u60a8\u53ef\u4ee5\u5927\u81f4\u4e86\u89e3\u4e0d\u540c\u5e93\u7684\u4f7f\u7528\u65b9\u5f0f\u548c\u8bed\u6cd5\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e09\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3.2 \u6bd4\u8f83\u5404\u79cd\u6280\u672f<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u9009\u62e9\u72b6\u6001\u7ba1\u7406\u6280\u672f\u65f6\uff0c\u4e86\u89e3\u5404\u79cd\u9009\u9879\u4e4b\u95f4\u7684\u5dee\u5f02\u662f\u975e\u5e38\u91cd\u8981\u7684\u3002\u8fd9\u4e0d\u4ec5\u53ef\u4ee5\u5e2e\u52a9\u60a8\u505a\u51fa\u66f4\u660e\u667a\u7684\u51b3\u7b56\uff0c\u8fd8\u53ef\u4ee5\u786e\u4fdd\u60a8\u9009\u62e9\u7684\u6280\u672f\u6700\u9002\u5408\u60a8\u7684\u9879\u76ee\u9700\u6c42\u3002\u4ee5\u4e0b\u662f\u4e00\u4e9b\u5e38\u89c1\u72b6\u6001\u7ba1\u7406\u5e93\u7684\u6bd4\u8f83\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Redux\/NgRx<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>\u4f18\u70b9<\/strong>: \u7ed3\u6784\u5316\uff0c\u53ef\u9884\u6d4b\uff0c\u5f3a\u5927\u7684\u793e\u7fa4\u652f\u6301\u3002<\/li>\n\n\n\n<li><strong>\u7f3a\u70b9<\/strong>: \u8f83\u9ad8\u7684\u5b66\u4e60\u66f2\u7ebf\uff0c\u53ef\u80fd\u9700\u8981\u66f4\u591a\u7684\u6a21\u677f\u4ee3\u7801\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>MobX<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>\u4f18\u70b9<\/strong>: \u7075\u6d3b\uff0c\u6613\u4e8e\u4e0a\u624b\uff0c\u81ea\u52a8\u4f9d\u8d56\u8ddf\u8e2a\u3002<\/li>\n\n\n\n<li><strong>\u7f3a\u70b9<\/strong>: \u53ef\u80fd\u7f3a\u4e4f\u7ed3\u6784\uff0c\u5927\u578b\u5e94\u7528\u4e2d\u53ef\u80fd\u96be\u4ee5\u7ba1\u7406\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Akita<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>\u4f18\u70b9<\/strong>: \u7b80\u5355\uff0c\u9ad8\u6548\uff0c\u4e0e Angular \u5f88\u597d\u5730\u96c6\u6210\u3002<\/li>\n\n\n\n<li><strong>\u7f3a\u70b9<\/strong>: \u76f8\u5bf9\u8f83\u65b0\uff0c\u793e\u7fa4\u652f\u6301\u53ef\u80fd\u4e0d\u5982\u5176\u4ed6\u9009\u9879\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>NgXs<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>\u4f18\u70b9<\/strong>: \u6613\u4e8e\u4e0a\u624b\uff0c\u6a21\u578b\u9a71\u52a8\uff0c\u6709\u7528\u7684\u63d2\u4ef6\u751f\u6001\u7cfb\u7edf\u3002<\/li>\n\n\n\n<li><strong>\u7f3a\u70b9<\/strong>: \u53ef\u80fd\u4e0d\u9002\u7528\u4e8e\u6240\u6709\u7c7b\u578b\u7684\u9879\u76ee\uff0c\u7279\u522b\u662f\u90a3\u4e9b\u9700\u8981\u9ad8\u5ea6\u81ea\u5b9a\u4e49\u7684\u9879\u76ee\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u8fd9\u4e00\u8282\u4e3b\u8981\u662f\u7406\u8bba\u6027\u7684\uff0c\u56e0\u6b64\u6ca1\u6709\u76f4\u63a5\u76f8\u5173\u7684\u4ee3\u7801\u793a\u4f8b\u3002\u7136\u800c\uff0c\u60a8\u53ef\u4ee5\u8003\u8651\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u5e94\u7528\u6216\u529f\u80fd\uff0c\u5e76\u5c1d\u8bd5\u4f7f\u7528\u4e0d\u540c\u7684\u72b6\u6001\u7ba1\u7406\u5e93\u6765\u5b9e\u73b0\u5b83\u3002\u8fd9\u6837\uff0c\u60a8\u53ef\u4ee5\u66f4\u76f4\u89c2\u5730\u4e86\u89e3\u5404\u4e2a\u5e93\u7684\u4f18\u7f3a\u70b9\u3002<\/p>\n\n\n\n<p>\u4f8b\u5982\uff0c\u60a8\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u8ba1\u6570\u5668\u5e94\u7528\uff0c\u5e76\u5c1d\u8bd5\u4f7f\u7528 Redux\/NgRx\u3001MobX\u3001Akita \u548c NgXs \u5206\u522b\u5b9e\u73b0\u5b83\u3002\u8fd9\u5c06\u5e2e\u52a9\u60a8\u66f4\u597d\u5730\u7406\u89e3\u8fd9\u4e9b\u5e93\u5728\u5b9e\u9645\u5e94\u7528\u4e2d\u7684\u8868\u73b0\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e09\u7ae0\u7b2c\u4e8c\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3.3 \u9009\u62e9\u9002\u5408\u60a8\u9879\u76ee\u7684\u6280\u672f<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u8bc4\u4f30\u4e86\u5404\u79cd\u72b6\u6001\u7ba1\u7406\u6280\u672f\u7684\u4f18\u7f3a\u70b9\u4e4b\u540e\uff0c\u4e0b\u4e00\u6b65\u662f\u6839\u636e\u60a8\u7684\u9879\u76ee\u9700\u6c42\u6765\u9009\u62e9\u6700\u9002\u5408\u7684\u6280\u672f\u3002\u4ee5\u4e0b\u662f\u4e00\u4e9b\u53ef\u80fd\u5f71\u54cd\u60a8\u51b3\u7b56\u7684\u56e0\u7d20\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u9879\u76ee\u89c4\u6a21<\/strong>: \u5bf9\u4e8e\u5927\u578b\u6216\u590d\u6742\u7684\u9879\u76ee\uff0c\u9009\u62e9\u4e00\u4e2a\u63d0\u4f9b\u7ed3\u6784\u548c\u89c4\u8303\u7684\u5e93\uff08\u5982 NgRx \u6216 Redux\uff09\u53ef\u80fd\u66f4\u6709\u5229\u3002<\/li>\n\n\n\n<li><strong>\u56e2\u961f\u7ecf\u9a8c<\/strong>: \u5982\u679c\u60a8\u7684\u56e2\u961f\u5df2\u7ecf\u719f\u6089\u67d0\u79cd\u72b6\u6001\u7ba1\u7406\u5e93\uff0c\u90a3\u4e48\u4f7f\u7528\u76f8\u540c\u7684\u5e93\u53ef\u80fd\u4f1a\u63d0\u9ad8\u5f00\u53d1\u6548\u7387\u3002<\/li>\n\n\n\n<li><strong>\u7279\u5b9a\u9700\u6c42<\/strong>: \u67d0\u4e9b\u9879\u76ee\u53ef\u80fd\u6709\u7279\u6b8a\u9700\u6c42\uff0c\u5982\u5b9e\u65f6\u6570\u636e\u540c\u6b65\u3001\u79bb\u7ebf\u652f\u6301\u7b49\uff0c\u8fd9\u4e9b\u9700\u6c42\u53ef\u80fd\u4f1a\u5f71\u54cd\u60a8\u7684\u9009\u62e9\u3002<\/li>\n\n\n\n<li><strong>\u672a\u6765\u53ef\u7ef4\u62a4\u6027<\/strong>: \u8003\u8651\u5230\u957f\u671f\u7ef4\u62a4\uff0c\u9009\u62e9\u4e00\u4e2a\u6709\u6d3b\u8dc3\u793e\u7fa4\u548c\u826f\u597d\u6587\u6863\u652f\u6301\u7684\u5e93\u662f\u660e\u667a\u7684\u3002<\/li>\n\n\n\n<li><strong>\u6027\u80fd\u8003\u8651<\/strong>: \u5982\u679c\u60a8\u7684\u5e94\u7528\u6709\u4e25\u683c\u7684\u6027\u80fd\u8981\u6c42\uff0c\u90a3\u4e48\u9009\u62e9\u4e00\u4e2a\u63d0\u4f9b\u9ad8\u7ea7\u4f18\u5316\u529f\u80fd\u7684\u5e93\u53ef\u80fd\u66f4\u5408\u9002\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u8fd9\u4e00\u8282\u4e3b\u8981\u662f\u7406\u8bba\u6027\u7684\uff0c\u56e0\u6b64\u6ca1\u6709\u76f4\u63a5\u76f8\u5173\u7684\u4ee3\u7801\u793a\u4f8b\u3002\u4f46\u60a8\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u4f2a\u4ee3\u7801\u6765\u6a21\u62df\u51b3\u7b56\u8fc7\u7a0b\uff1a<\/p>\n\n\n\n<p>plaintextCopy code<\/p>\n\n\n\n<p><code>if (projectScale === 'large') { choose('NgRx or Redux'); } else if (teamExperience.includes('MobX')) { choose('MobX'); } else if (specialRequirements.includes('real-time data')) { choose('any library with real-time support'); } else { choose('any library that fits the project'); }<\/code><\/p>\n\n\n\n<p>\u8fd9\u4e2a\u7b80\u5355\u7684\u903b\u8f91\u53ef\u4ee5\u4f5c\u4e3a\u60a8\u505a\u51b3\u7b56\u65f6\u7684\u4e00\u4e2a\u53c2\u8003\u70b9\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e09\u7ae0\u7b2c\u4e09\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u7ae0\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u56db\u7ae0\uff1a\u6df1\u5165NgRx<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.1 NgRx\u57fa\u7840<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u7531\u4e8e NgRx \u662f\u4e13\u4e3a Angular \u8bbe\u8ba1\u7684\uff0c\u5e76\u4e14\u63d0\u4f9b\u4e86\u4e00\u79cd\u7ed3\u6784\u5316\u548c\u53ef\u9884\u6d4b\u7684\u65b9\u5f0f\u6765\u7ba1\u7406\u72b6\u6001\uff0c\u56e0\u6b64\u6211\u4eec\u5c06\u5728\u672c\u7ae0\u4e2d\u91cd\u70b9\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528 NgRx \u8fdb\u884c\u72b6\u6001\u7ba1\u7406\u3002\u9996\u5148\uff0c\u8ba9\u6211\u4eec\u4e86\u89e3\u4e00\u4e0b NgRx \u7684\u57fa\u7840\u6982\u5ff5\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Store<\/strong>: \u5728 NgRx \u4e2d\uff0cStore \u662f\u4e00\u4e2a\u4e0d\u53ef\u53d8\u7684\u5bf9\u8c61\u5bb9\u5668\uff0c\u7528\u4e8e\u5b58\u50a8\u6574\u4e2a\u5e94\u7528\u7684\u72b6\u6001\u3002<\/li>\n\n\n\n<li><strong>Actions<\/strong>: Actions \u662f\u63cf\u8ff0\u72b6\u6001\u5982\u4f55\u6539\u53d8\u7684\u7b80\u5355\u5bf9\u8c61\u3002\u5b83\u4eec\u901a\u5e38\u6709\u4e00\u4e2a <code>type<\/code> \u5b57\u6bb5\u548c\u4e00\u4e2a\u53ef\u9009\u7684 <code>payload<\/code> \u5b57\u6bb5\u3002<\/li>\n\n\n\n<li><strong>Reducers<\/strong>: Reducers \u662f\u7eaf\u51fd\u6570\uff0c\u7528\u4e8e\u6839\u636e\u5f53\u524d\u72b6\u6001\u548c\u4e00\u4e2a Action \u6765\u8ba1\u7b97\u65b0\u7684\u72b6\u6001\u3002<\/li>\n\n\n\n<li><strong>Effects<\/strong>: Effects \u662f\u7528\u4e8e\u5904\u7406\u5f02\u6b65\u64cd\u4f5c\u548c\u4e0e\u5916\u90e8\u8d44\u6e90\uff08\u5982 API\uff09\u4ea4\u4e92\u7684\u3002<\/li>\n\n\n\n<li><strong>Selectors<\/strong>: Selectors \u662f\u7eaf\u51fd\u6570\uff0c\u7528\u4e8e\u4ece Store \u4e2d\u9009\u62e9\u548c\u7ec4\u5408\u6570\u636e\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u9996\u5148\uff0c\u5b89\u88c5 NgRx \u5e93\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install @ngrx\/store @ngrx\/effects --save<\/code><\/p>\n\n\n\n<p>\u7136\u540e\u5b9a\u4e49\u4e00\u4e2a\u7b80\u5355\u7684 Action\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ counter.actions.ts import { createAction } from '@ngrx\/store'; export const increment = createAction('[Counter] Increment'); export const decrement = createAction('[Counter] Decrement');<\/code><\/p>\n\n\n\n<p>\u63a5\u7740\uff0c\u521b\u5efa\u4e00\u4e2a Reducer \u6765\u5904\u7406\u8fd9\u4e9b Action\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ counter.reducer.ts import { createReducer, on } from '@ngrx\/store'; import { increment, decrement } from '.\/counter.actions'; export const initialState = 0; const _counterReducer = createReducer( initialState, on(increment, state =&gt; state + 1), on(decrement, state =&gt; state - 1) ); export function counterReducer(state, action) { return _counterReducer(state, action); }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528 NgRx \u63d0\u4f9b\u7684 <code>createAction<\/code> \u548c <code>createReducer<\/code> \u51fd\u6570\u6765\u5b9a\u4e49 Actions \u548c Reducers\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u56db\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.2 \u4f7f\u7528Effects\u5904\u7406\u5f02\u6b65\u64cd\u4f5c<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u590d\u6742\u7684\u5e94\u7528\u4e2d\uff0c\u60a8\u53ef\u80fd\u9700\u8981\u5904\u7406\u5f02\u6b65\u64cd\u4f5c\uff0c\u5982 API \u8c03\u7528\u3001\u5b9a\u65f6\u5668\u6216\u5176\u4ed6\u5f02\u6b65\u4e8b\u4ef6\u3002NgRx \u63d0\u4f9b\u4e86\u4e00\u4e2a\u540d\u4e3a Effects \u7684\u6a21\u5757\uff0c\u7528\u4e8e\u5904\u7406\u8fd9\u4e9b\u5f02\u6b65\u64cd\u4f5c\uff0c\u5e76\u5c06\u7ed3\u679c\u5206\u6d3e\u4e3a\u65b0\u7684 Actions\u3002<\/p>\n\n\n\n<p>Effects \u7684\u6838\u5fc3\u6982\u5ff5\u662f\u4f7f\u7528 RxJS Observables \u6765\u76d1\u542c Actions\uff0c\u5e76\u6839\u636e\u8fd9\u4e9b Actions \u6267\u884c\u5f02\u6b65\u64cd\u4f5c\u3002\u8fd9\u6837\uff0c\u60a8\u53ef\u4ee5\u5c06\u5f02\u6b65\u903b\u8f91\u4e0e\u7eaf\u7cb9\u7684\u72b6\u6001\u7ba1\u7406\u903b\u8f91\uff08\u5373 Reducers\uff09\u5206\u79bb\u5f00\u6765\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u9996\u5148\uff0c\u5b89\u88c5 NgRx Effects \u5e93\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install @ngrx\/effects --save<\/code><\/p>\n\n\n\n<p>\u7136\u540e\u521b\u5efa\u4e00\u4e2a Effect \u6765\u5904\u7406\u5f02\u6b65\u64cd\u4f5c\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ counter.effects.ts import { Injectable } from '@angular\/core'; import { Actions, ofType, createEffect } from '@ngrx\/effects'; import { EMPTY } from 'rxjs'; import { map, mergeMap, catchError } from 'rxjs\/operators'; import * as counterActions from '.\/counter.actions'; import { MyService } from '.\/my.service'; @Injectable() export class CounterEffects { loadData$ = createEffect(() =&gt; this.actions$.pipe( ofType(counterActions.increment), mergeMap(() =&gt; this.myService.getAll() .pipe( map(data =&gt; counterActions.loadDataSuccess({ data })), catchError(() =&gt; EMPTY) )) ) ); constructor( private actions$: Actions, private myService: MyService ) {} }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2a\u540d\u4e3a <code>loadData$<\/code> \u7684 Effect\uff0c\u5b83\u76d1\u542c <code>increment<\/code> Action\u3002\u5f53\u8fd9\u4e2a Action \u88ab\u5206\u6d3e\u65f6\uff0cEffect \u4f1a\u8c03\u7528 <code>MyService.getAll()<\/code> \u65b9\u6cd5\u6765\u6267\u884c\u5f02\u6b65\u64cd\u4f5c\uff0c\u5e76\u5728\u64cd\u4f5c\u6210\u529f\u65f6\u5206\u6d3e\u4e00\u4e2a\u65b0\u7684 <code>loadDataSuccess<\/code> Action\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u56db\u7ae0\u7b2c\u4e8c\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.3 \u4f7f\u7528Selectors\u83b7\u53d6\u72b6\u6001<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728 NgRx \u4e2d\uff0cSelectors \u662f\u7528\u4e8e\u4ece Store \u4e2d\u83b7\u53d6\u72b6\u6001\u7684\u7eaf\u51fd\u6570\u3002Selectors \u63d0\u4f9b\u4e86\u4e00\u79cd\u9ad8\u6548\u3001\u53ef\u7ec4\u5408\u7684\u65b9\u5f0f\u6765\u67e5\u8be2\u72b6\u6001\uff0c\u800c\u65e0\u9700\u76f4\u63a5\u8bbf\u95ee Store\u3002\u8fd9\u6837\uff0c\u60a8\u53ef\u4ee5\u66f4\u5bb9\u6613\u5730\u91cd\u7528\u548c\u6d4b\u8bd5\u72b6\u6001\u67e5\u8be2\u903b\u8f91\u3002<\/p>\n\n\n\n<p>Selectors \u901a\u5e38\u7528\u4e8e\u7ec4\u4ef6\u548c Effects \u4e2d\uff0c\u4ee5\u4fbf\u83b7\u53d6\u6240\u9700\u7684\u72b6\u6001\u7247\u6bb5\u3002\u901a\u8fc7\u4f7f\u7528 <code>createFeatureSelector<\/code> \u548c <code>createSelector<\/code> \u51fd\u6570\uff0c\u60a8\u53ef\u4ee5\u521b\u5efa\u9ad8\u5ea6\u4f18\u5316\u7684\u3001\u53ea\u5728\u72b6\u6001\u6539\u53d8\u65f6\u91cd\u65b0\u8ba1\u7b97\u7684 Selectors\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u9996\u5148\uff0c\u521b\u5efa\u4e00\u4e2a Feature Selector \u6765\u83b7\u53d6\u7279\u5b9a\u529f\u80fd\u533a\u57df\u7684\u72b6\u6001\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ counter.selectors.ts import { createFeatureSelector, createSelector } from '@ngrx\/store'; export const selectCounterFeature = createFeatureSelector&lt;number&gt;('counter');<\/code><\/p>\n\n\n\n<p>\u7136\u540e\uff0c\u521b\u5efa\u4e00\u4e2a\u66f4\u5177\u4f53\u7684 Selector \u6765\u83b7\u53d6\u6240\u9700\u7684\u72b6\u6001\u7247\u6bb5\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ counter.selectors.ts (\u7eed) export const selectCounterValue = createSelector( selectCounterFeature, (state: number) =&gt; state );<\/code><\/p>\n\n\n\n<p>\u6700\u540e\uff0c\u5728\u7ec4\u4ef6\u6216 Effect \u4e2d\u4f7f\u7528\u8fd9\u4e9b Selector\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ counter.component.ts import { Store } from '@ngrx\/store'; import * as fromCounter from '.\/counter.selectors'; @Component({ \/\/ ... }) export class CounterComponent { counter$ = this.store.select(fromCounter.selectCounterValue); constructor(private store: Store) {} }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528 <code>store.select()<\/code> \u65b9\u6cd5\u548c\u4e4b\u524d\u521b\u5efa\u7684 <code>selectCounterValue<\/code> Selector \u6765\u83b7\u53d6\u5f53\u524d\u7684\u8ba1\u6570\u503c\uff0c\u5e76\u5c06\u5176\u5b58\u50a8\u5728 <code>counter$<\/code> Observable \u4e2d\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u56db\u7ae0\u7b2c\u4e09\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.4 \u72b6\u6001\u6301\u4e45\u5316\u4e0e\u61d2\u52a0\u8f7d<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u590d\u6742\u7684 Angular \u5e94\u7528\u4e2d\uff0c\u60a8\u53ef\u80fd\u9700\u8981\u8003\u8651\u72b6\u6001\u6301\u4e45\u5316\u548c\u61d2\u52a0\u8f7d\u3002\u72b6\u6001\u6301\u4e45\u5316\u610f\u5473\u7740\u5c06\u5e94\u7528\u72b6\u6001\u4fdd\u5b58\u5230\u67d0\u79cd\u6301\u4e45\u5b58\u50a8\uff08\u5982 localStorage\uff09\u4e2d\uff0c\u4ee5\u4fbf\u7528\u6237\u5728\u5173\u95ed\u548c\u91cd\u65b0\u6253\u5f00\u5e94\u7528\u540e\u80fd\u591f\u6062\u590d\u5230\u4e4b\u524d\u7684\u72b6\u6001\u3002\u61d2\u52a0\u8f7d\u5219\u662f\u4e00\u79cd\u4f18\u5316\u6280\u672f\uff0c\u7528\u4e8e\u6309\u9700\u52a0\u8f7d\u5e94\u7528\u7684\u90e8\u5206\u529f\u80fd\uff0c\u4ece\u800c\u63d0\u9ad8\u5e94\u7528\u7684\u542f\u52a8\u901f\u5ea6\u3002<\/p>\n\n\n\n<p>NgRx \u63d0\u4f9b\u4e86\u4e00\u4e9b\u5de5\u5177\u548c\u6a21\u5f0f\u6765\u652f\u6301\u8fd9\u4e24\u79cd\u9700\u6c42\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>\u72b6\u6001\u6301\u4e45\u5316<\/strong><\/p>\n\n\n\n<p>\u4f7f\u7528 <code>ngrx-store-localstorage<\/code> \u5e93\u6765\u5b9e\u73b0\u72b6\u6001\u6301\u4e45\u5316\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install ngrx-store-localstorage --save<\/code><\/p>\n\n\n\n<p>\u7136\u540e\u5728\u5e94\u7528\u6a21\u5757\u4e2d\u914d\u7f6e\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { localStorageSync } from 'ngrx-store-localstorage'; const reducers = { counter: counterReducer }; function localStorageSyncReducer(reducer: ActionReducer&lt;any&gt;): ActionReducer&lt;any&gt; { return localStorageSync({ keys: ['counter'], rehydrate: true })(reducer); } @NgModule({ imports: [ StoreModule.forRoot(reducers, { metaReducers: [localStorageSyncReducer] }) ], \/\/ ... }) export class AppModule { }<\/code><\/p>\n\n\n\n<p><strong>\u61d2\u52a0\u8f7d<\/strong><\/p>\n\n\n\n<p>\u5728 Angular \u4e2d\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 Angular Router \u7684\u61d2\u52a0\u8f7d\u529f\u80fd\u6765\u61d2\u52a0\u8f7d\u7279\u5b9a\u6a21\u5757\u3002\u5728 NgRx \u4e2d\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 <code>forFeature<\/code> \u65b9\u6cd5\u6765\u61d2\u52a0\u8f7d\u7279\u5b9a\u529f\u80fd\u7684\u72b6\u6001\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ feature.module.ts @NgModule({ imports: [ StoreModule.forFeature('feature', featureReducer) ], \/\/ ... }) export class FeatureModule { }<\/code><\/p>\n\n\n\n<p>\u8fd9\u6837\uff0c<code>feature<\/code> \u72b6\u6001\u53ea\u6709\u5728 <code>FeatureModule<\/code> \u88ab\u61d2\u52a0\u8f7d\u65f6\u624d\u4f1a\u6dfb\u52a0\u5230\u5168\u5c40\u72b6\u6001\u4e2d\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u56db\u7ae0\u7b2c\u56db\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u4e2a\u65b9\u5411\u5408\u9002\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.5 \u6d4b\u8bd5\u4e0e\u8c03\u8bd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u6d4b\u8bd5\u548c\u8c03\u8bd5\u662f\u4efb\u4f55\u5e94\u7528\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u4e0d\u53ef\u6216\u7f3a\u7684\u90e8\u5206\u3002\u5bf9\u4e8e\u4f7f\u7528 NgRx \u8fdb\u884c\u72b6\u6001\u7ba1\u7406\u7684 Angular \u5e94\u7528\uff0c\u6709\u51e0\u79cd\u7279\u5b9a\u7684\u5de5\u5177\u548c\u65b9\u6cd5\u53ef\u4ee5\u5e2e\u52a9\u60a8\u66f4\u6709\u6548\u5730\u8fdb\u884c\u6d4b\u8bd5\u548c\u8c03\u8bd5\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5355\u5143\u6d4b\u8bd5<\/strong>: NgRx \u7684\u7eaf\u51fd\u6570\u6027\u8d28\u4f7f\u5f97\u5355\u5143\u6d4b\u8bd5\u53d8\u5f97\u76f8\u5bf9\u5bb9\u6613\u3002\u60a8\u53ef\u4ee5\u72ec\u7acb\u6d4b\u8bd5 Actions\u3001Reducers \u548c Selectors\u3002<\/li>\n\n\n\n<li><strong>Effects \u6d4b\u8bd5<\/strong>: \u5bf9\u4e8e Effects\uff0c\u60a8\u53ef\u80fd\u9700\u8981\u4f7f\u7528 Angular \u7684\u4f9d\u8d56\u6ce8\u5165\u548c RxJS \u7684\u6d4b\u8bd5\u5de5\u5177\u3002<\/li>\n\n\n\n<li><strong>Redux DevTools<\/strong>: NgRx \u662f\u4e0e Redux DevTools \u517c\u5bb9\u7684\uff0c\u8fd9\u662f\u4e00\u4e2a\u975e\u5e38\u5f3a\u5927\u7684\u7528\u4e8e\u5b9e\u65f6\u67e5\u770b Store \u72b6\u6001\u3001\u6267\u884c Actions \u548c\u67e5\u770b\u72b6\u6001\u53d8\u5316\u7684\u6d4f\u89c8\u5668\u6269\u5c55\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>\u6d4b\u8bd5 Reducer<\/strong><\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ counter.reducer.spec.ts import { counterReducer } from '.\/counter.reducer'; import * as fromCounter from '.\/counter.actions'; describe('Counter Reducer', () =&gt; { it('should return the initial state', () =&gt; { const action = {} as any; const result = counterReducer(undefined, action); expect(result).toBe(0); }); it('should increment the state', () =&gt; { const action = fromCounter.increment(); const result = counterReducer(0, action); expect(result).toBe(1); }); });<\/code><\/p>\n\n\n\n<p><strong>\u4f7f\u7528 Redux DevTools<\/strong><\/p>\n\n\n\n<p>\u5b89\u88c5 Redux DevTools \u6d4f\u89c8\u5668\u6269\u5c55\u540e\uff0c\u60a8\u53ef\u4ee5\u5728\u5e94\u7528\u6a21\u5757\u4e2d\u6dfb\u52a0\u4ee5\u4e0b\u4ee3\u7801\u4ee5\u542f\u7528 DevTools \u652f\u6301\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { StoreDevtoolsModule } from '@ngrx\/store-devtools'; @NgModule({ imports: [ \/\/ ... StoreDevtoolsModule.instrument({ maxAge: 25 \/\/ Retains last 25 states }) ], \/\/ ... }) export class AppModule { }<\/code><\/p>\n\n\n\n<p>\u8fd9\u6837\uff0c\u60a8\u5c31\u53ef\u4ee5\u4f7f\u7528 Redux DevTools \u6765\u67e5\u770b\u548c\u8c03\u8bd5\u5e94\u7528\u7684\u72b6\u6001\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u56db\u7ae0\u7b2c\u4e94\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u8fd9\u4e5f\u662f\u672c\u6559\u7a0b\u7684\u6700\u540e\u4e00\u4e2a\u5c0f\u8282\u3002\u63a5\u4e0b\u6765\uff0c\u6211\u5c06\u5bf9\u6574\u4e2a\u6559\u7a0b\u8fdb\u884c\u603b\u7ed3\uff0c\u5e76\u63d0\u4f9b\u8fdb\u4e00\u6b65\u5b66\u4e60\u7684\u53c2\u8003\u8d44\u6599\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u6559\u7a0b\u603b\u7ed3<\/h2>\n\n\n\n<p>\u672c\u6559\u7a0b\u65e8\u5728\u63d0\u4f9b\u4e00\u4e2a\u5168\u9762\u7684\u6307\u5357\uff0c\u4ee5\u5e2e\u52a9\u60a8\u4e86\u89e3 Angular \u4e2d\u7684\u72b6\u6001\u7ba1\u7406\u6280\u672f\u3002\u6211\u4eec\u9996\u5148\u4ecb\u7ecd\u4e86\u72b6\u6001\u7ba1\u7406\u7684\u57fa\u7840\u6982\u5ff5\uff0c\u7136\u540e\u5217\u4e3e\u4e86\u51e0\u79cd\u5e38\u7528\u7684\u72b6\u6001\u7ba1\u7406\u5e93\uff0c\u5e76\u5bf9\u5b83\u4eec\u8fdb\u884c\u4e86\u6bd4\u8f83\u3002\u6700\u540e\uff0c\u6211\u4eec\u9009\u62e9\u4e86 NgRx \u8fdb\u884c\u4e86\u6df1\u5165\u7684\u6559\u5b66\u3002<\/p>\n\n\n\n<p>\u901a\u8fc7\u672c\u6559\u7a0b\uff0c\u60a8\u5e94\u8be5\u80fd\u591f\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7406\u89e3\u72b6\u6001\u7ba1\u7406\u7684\u91cd\u8981\u6027\u548c\u57fa\u7840\u6982\u5ff5\u3002<\/li>\n\n\n\n<li>\u4e86\u89e3 Angular \u751f\u6001\u7cfb\u7edf\u4e2d\u7684\u4e3b\u8981\u72b6\u6001\u7ba1\u7406\u5e93\u3002<\/li>\n\n\n\n<li>\u6839\u636e\u9879\u76ee\u9700\u6c42\u9009\u62e9\u5408\u9002\u7684\u72b6\u6001\u7ba1\u7406\u6280\u672f\u3002<\/li>\n\n\n\n<li>\u638c\u63e1 NgRx \u7684\u57fa\u7840\u7528\u6cd5\uff0c\u5305\u62ec Actions\u3001Reducers\u3001Effects \u548c Selectors\u3002<\/li>\n\n\n\n<li>\u4e86\u89e3\u5982\u4f55\u8fdb\u884c\u72b6\u6001\u6301\u4e45\u5316\u548c\u61d2\u52a0\u8f7d\u3002<\/li>\n\n\n\n<li>\u719f\u6089 NgRx \u7684\u6d4b\u8bd5\u548c\u8c03\u8bd5\u5de5\u5177\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u8fdb\u4e00\u6b65\u5b66\u4e60\u7684\u53c2\u8003\u8d44\u6599<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/ngrx.io\/\">NgRx \u5b98\u65b9\u6587\u6863<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/angular.io\/guide\/state-management\">Angular \u5b98\u65b9\u6587\u6863\u4e2d\u7684\u72b6\u6001\u7ba1\u7406\u90e8\u5206<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/redux.js.org\/\">Redux \u5b98\u65b9\u6587\u6863<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mobx.js.org\/README.html\">MobX \u5b98\u65b9\u6587\u6863<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/datorama.github.io\/akita\/\">Akita \u5b98\u65b9\u6587\u6863<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.ngxs.io\/\">NgXs \u5b98\u65b9\u6587\u6863<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rxjs.dev\/\">RxJS \u5b98\u65b9\u6587\u6863<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/angular.io\/guide\/testing\">Angular Testing Guide<\/a><\/li>\n<\/ol>\n\n\n\n<p>\u5e0c\u671b\u672c\u6559\u7a0b\u80fd\u5e2e\u52a9\u60a8\u66f4\u597d\u5730\u7406\u89e3 Angular \u4e2d\u7684\u72b6\u6001\u7ba1\u7406\uff0c\u5e76\u4e3a\u60a8\u7684\u9879\u76ee\u63d0\u4f9b\u6709\u7528\u7684\u6307\u5bfc\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u56db\u7ae0\uff1aNgRx\u57fa\u7840\u76844.1 NgRx\u67b6\u6784ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.1 NgRx\u67b6\u6784<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>NgRx \u67b6\u6784\u662f\u4e00\u79cd\u57fa\u4e8e Redux \u67b6\u6784\u7684\u72b6\u6001\u7ba1\u7406\u6a21\u5f0f\uff0c\u4e13\u95e8\u4e3a Angular \u5e94\u7528\u7a0b\u5e8f\u8bbe\u8ba1\u3002\u5b83\u4f7f\u7528 RxJS \u5e93\u6765\u5904\u7406\u5f02\u6b65\u64cd\u4f5c\u548c\u6570\u636e\u6d41\u3002NgRx \u67b6\u6784\u4e3b\u8981\u7531\u4ee5\u4e0b\u51e0\u4e2a\u6838\u5fc3\u7ec4\u4ef6\u7ec4\u6210\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Store<\/strong>: Store \u662f\u4e00\u4e2a\u4e0d\u53ef\u53d8\u7684\u6570\u636e\u7ed3\u6784\uff0c\u7528\u4e8e\u5b58\u50a8\u5e94\u7528\u7a0b\u5e8f\u7684\u6574\u4e2a\u72b6\u6001\u3002\u5b83\u662f\u4e00\u4e2a Observable\uff0c\u60a8\u53ef\u4ee5\u8ba2\u9605\u5b83\u4ee5\u83b7\u53d6\u72b6\u6001\u66f4\u65b0\u3002<\/li>\n\n\n\n<li><strong>Actions<\/strong>: Actions \u662f\u63cf\u8ff0\u53d1\u751f\u4e86\u4ec0\u4e48\u4e8b\u60c5\u7684\u5bf9\u8c61\u3002\u5b83\u4eec\u662f\u6539\u53d8\u72b6\u6001\u7684\u552f\u4e00\u9014\u5f84\u3002<\/li>\n\n\n\n<li><strong>Reducers<\/strong>: Reducers \u662f\u7eaf\u51fd\u6570\uff0c\u7528\u4e8e\u6839\u636e\u5f53\u524d\u72b6\u6001\u548c\u7ed9\u5b9a\u7684 Action \u6765\u751f\u6210\u65b0\u7684\u72b6\u6001\u3002<\/li>\n\n\n\n<li><strong>Effects<\/strong>: Effects \u662f\u7528\u4e8e\u5904\u7406\u4e0e\u5916\u90e8\u90e8\u5206\uff08\u5982\u670d\u52a1\u5668\u3001\u6570\u636e\u5e93\u7b49\uff09\u7684\u4ea4\u4e92\u7684\u670d\u52a1\u3002<\/li>\n\n\n\n<li><strong>Selectors<\/strong>: Selectors \u662f\u7528\u4e8e\u4ece Store \u4e2d\u63d0\u53d6\u7279\u5b9a\u7247\u6bb5\u7684\u72b6\u6001\u7684\u51fd\u6570\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>\u5b89\u88c5 NgRx<\/strong><\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u60a8\u9700\u8981\u5b89\u88c5 NgRx \u7684\u6838\u5fc3\u5e93\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install @ngrx\/store --save<\/code><\/p>\n\n\n\n<p><strong>\u5b9a\u4e49 Actions<\/strong><\/p>\n\n\n\n<p>\u5728 NgRx \u4e2d\uff0cActions \u662f\u901a\u8fc7 <code>createAction<\/code> \u51fd\u6570\u6765\u5b9a\u4e49\u7684\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ actions\/counter.actions.ts import { createAction } from '@ngrx\/store'; export const increment = createAction('[Counter] Increment'); export const decrement = createAction('[Counter] Decrement');<\/code><\/p>\n\n\n\n<p><strong>\u521b\u5efa Reducer<\/strong><\/p>\n\n\n\n<p>Reducer \u662f\u4e00\u4e2a\u7eaf\u51fd\u6570\uff0c\u7528\u4e8e\u5904\u7406 Actions \u5e76\u8fd4\u56de\u65b0\u7684\u72b6\u6001\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ reducers\/counter.reducer.ts import { createReducer, on } from '@ngrx\/store'; import { increment, decrement } from '..\/actions\/counter.actions'; export const initialState = 0; const _counterReducer = createReducer( initialState, on(increment, (state) =&gt; state + 1), on(decrement, (state) =&gt; state - 1) ); export function counterReducer(state, action) { return _counterReducer(state, action); }<\/code><\/p>\n\n\n\n<p><strong>\u8bbe\u7f6e Store<\/strong><\/p>\n\n\n\n<p>\u5728 Angular \u7684\u6a21\u5757\u4e2d\uff0c\u60a8\u9700\u8981\u8bbe\u7f6e Store\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { StoreModule } from '@ngrx\/store'; import { counterReducer } from '.\/reducers\/counter.reducer'; @NgModule({ imports: [ StoreModule.forRoot({ count: counterReducer }), \/\/ other imports ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p>\u8fd9\u6837\uff0c\u60a8\u5c31\u6210\u529f\u5730\u8bbe\u7f6e\u4e86\u4e00\u4e2a\u57fa\u672c\u7684 NgRx \u67b6\u6784\uff0c\u5305\u62ec Action\u3001Reducer \u548c Store\u3002\u8fd9\u662f NgRx \u67b6\u6784\u7684\u57fa\u7840\uff0c\u60a8\u53ef\u4ee5\u5728\u6b64\u57fa\u7840\u4e0a\u6dfb\u52a0\u66f4\u591a\u9ad8\u7ea7\u529f\u80fd\uff0c\u5982 Effects \u548c Selectors\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u56db\u7ae0\u7b2c\u4e00\u5c0f\u8282 &#8220;NgRx \u57fa\u7840&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u56db\u7ae0\uff1aNgRx\u57fa\u7840\u76844.2 ActionsChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.2 Actions<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728 NgRx \u4e2d\uff0cActions \u662f\u7528\u4e8e\u63cf\u8ff0\u5e94\u7528\u4e2d\u53d1\u751f\u7684\u4e8b\u4ef6\u6216\u64cd\u4f5c\u7684\u5bf9\u8c61\u3002\u5b83\u4eec\u662f\u6539\u53d8\u5e94\u7528\u72b6\u6001\u7684\u552f\u4e00\u65b9\u5f0f\u3002\u6bcf\u4e2a Action \u5bf9\u8c61\u901a\u5e38\u5305\u542b\u4e00\u4e2a <code>type<\/code> \u5b57\u6bb5\u548c\u4e00\u4e2a\u53ef\u9009\u7684 <code>payload<\/code> \u5b57\u6bb5\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Type<\/strong>: Action \u7684 <code>type<\/code> \u5b57\u6bb5\u662f\u4e00\u4e2a\u5b57\u7b26\u4e32\uff0c\u7528\u4e8e\u63cf\u8ff0 Action \u7684\u6027\u8d28\u6216\u76ee\u7684\u3002\u5b83\u901a\u5e38\u9075\u5faa <code>[Source] Event<\/code> \u7684\u683c\u5f0f\uff0c\u4ee5\u4fbf\u66f4\u5bb9\u6613\u5730\u8bc6\u522b\u548c\u8c03\u8bd5\u3002<\/li>\n\n\n\n<li><strong>Payload<\/strong>: <code>payload<\/code> \u662f\u4e00\u4e2a\u53ef\u9009\u5b57\u6bb5\uff0c\u7528\u4e8e\u4f20\u9012\u4e0e Action \u76f8\u5173\u7684\u4efb\u4f55\u989d\u5916\u6570\u636e\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>\u5b9a\u4e49 Actions<\/strong><\/p>\n\n\n\n<p>\u5728 NgRx \u4e2d\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 <code>createAction<\/code> \u51fd\u6570\u6765\u5b9a\u4e49 Actions\u3002\u8fd9\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u4f8b\u5b50\uff0c\u5c55\u793a\u4e86\u5982\u4f55\u5b9a\u4e49\u4e00\u4e2a\u589e\u52a0\u8ba1\u6570\u5668\u548c\u4e00\u4e2a\u51cf\u5c11\u8ba1\u6570\u5668\u7684 Action\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ actions\/counter.actions.ts import { createAction, props } from '@ngrx\/store'; export const increment = createAction('[Counter] Increment'); export const decrement = createAction('[Counter] Decrement'); export const add = createAction( '[Counter] Add', props&lt;{ amount: number }&gt;() );<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c<code>increment<\/code> \u548c <code>decrement<\/code> Actions \u6ca1\u6709 <code>payload<\/code>\uff0c\u800c <code>add<\/code> Action \u6709\u4e00\u4e2a\u540d\u4e3a <code>amount<\/code> \u7684 <code>payload<\/code>\u3002<\/p>\n\n\n\n<p><strong>\u5206\u53d1 Actions<\/strong><\/p>\n\n\n\n<p>\u5728\u5e94\u7528\u4e2d\uff0c\u60a8\u901a\u5e38\u4f1a\u5728\u7ec4\u4ef6\u6216 Effects \u4e2d\u5206\u53d1 Actions\u3002\u8fd9\u662f\u5982\u4f55\u5728\u4e00\u4e2a Angular \u7ec4\u4ef6\u4e2d\u5206\u53d1\u4e00\u4e2a Action \u7684\u4f8b\u5b50\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ components\/counter.component.ts import { Component } from '@angular\/core'; import { Store } from '@ngrx\/store'; import * as CounterActions from '..\/actions\/counter.actions'; @Component({ selector: 'app-counter', template: ` &lt;button (click)=\"increment()\"&gt;Increment&lt;\/button&gt; &lt;button (click)=\"decrement()\"&gt;Decrement&lt;\/button&gt; &lt;button (click)=\"add(5)\"&gt;Add 5&lt;\/button&gt; `, }) export class CounterComponent { constructor(private store: Store) {} increment() { this.store.dispatch(CounterActions.increment()); } decrement() { this.store.dispatch(CounterActions.decrement()); } add(amount: number) { this.store.dispatch(CounterActions.add({ amount })); } }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u7ec4\u4ef6\u4e2d\uff0c\u6211\u4eec\u6ce8\u5165\u4e86 NgRx \u7684 <code>Store<\/code> \u670d\u52a1\uff0c\u5e76\u4f7f\u7528 <code>dispatch<\/code> \u65b9\u6cd5\u6765\u5206\u53d1\u6211\u4eec\u4e4b\u524d\u5b9a\u4e49\u7684 Actions\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u56db\u7ae0\u7b2c\u4e8c\u5c0f\u8282 &#8220;Actions&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u56db\u7ae0\uff1aNgRx\u57fa\u7840\u76844.3 ReducersChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.3 Reducers<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728 NgRx \u4e2d\uff0cReducers \u662f\u7528\u4e8e\u5904\u7406 Actions \u5e76\u66f4\u65b0\u5e94\u7528\u72b6\u6001\u7684\u7eaf\u51fd\u6570\u3002\u6bcf\u5f53\u4e00\u4e2a Action \u88ab\u5206\u53d1\u5230 Store\uff0c\u76f8\u5e94\u7684 Reducer \u5c31\u4f1a\u88ab\u8c03\u7528\uff0c\u4ee5\u8ba1\u7b97\u65b0\u7684\u72b6\u6001\u3002<\/p>\n\n\n\n<p>Reducer \u51fd\u6570\u63a5\u53d7\u4e24\u4e2a\u53c2\u6570\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5f53\u524d\u72b6\u6001\uff08Current State\uff09<\/strong>: \u8fd9\u662f\u5e94\u7528\u7684\u5f53\u524d\u72b6\u6001\u6216\u8005\u8be5 Reducer \u7ba1\u7406\u7684\u72b6\u6001\u7247\u6bb5\u3002<\/li>\n\n\n\n<li><strong>Action<\/strong>: \u8fd9\u662f\u88ab\u5206\u53d1\u7684 Action \u5bf9\u8c61\u3002<\/li>\n<\/ol>\n\n\n\n<p>Reducer \u5fc5\u987b\u662f\u7eaf\u51fd\u6570\uff0c\u8fd9\u610f\u5473\u7740\u7ed9\u5b9a\u76f8\u540c\u7684\u8f93\u5165\uff08\u5f53\u524d\u72b6\u6001\u548c Action\uff09\uff0c\u5b83\u5e94\u8be5\u59cb\u7ec8\u8fd4\u56de\u76f8\u540c\u7684\u8f93\u51fa\uff08\u65b0\u72b6\u6001\uff09\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>\u5b9a\u4e49 Reducer<\/strong><\/p>\n\n\n\n<p>\u5728 NgRx \u4e2d\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 <code>createReducer<\/code> \u51fd\u6570\u6765\u5b9a\u4e49 Reducer\u3002\u8fd9\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u4f8b\u5b50\uff0c\u5c55\u793a\u4e86\u5982\u4f55\u5b9a\u4e49\u4e00\u4e2a\u7ba1\u7406\u8ba1\u6570\u5668\u72b6\u6001\u7684 Reducer\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ reducers\/counter.reducer.ts import { createReducer, on } from '@ngrx\/store'; import { increment, decrement, add } from '..\/actions\/counter.actions'; export const initialState = 0; const _counterReducer = createReducer( initialState, on(increment, (state) =&gt; state + 1), on(decrement, (state) =&gt; state - 1), on(add, (state, { amount }) =&gt; state + amount) ); export function counterReducer(state, action) { return _counterReducer(state, action); }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u5b9a\u4e49\u4e86\u4e00\u4e2a\u540d\u4e3a <code>_counterReducer<\/code> \u7684 Reducer \u51fd\u6570\uff0c\u5b83\u5904\u7406 <code>increment<\/code>\u3001<code>decrement<\/code> \u548c <code>add<\/code> Actions\u3002\u5bf9\u4e8e\u6bcf\u79cd Action \u7c7b\u578b\uff0c\u6211\u4eec\u5b9a\u4e49\u4e86\u4e00\u4e2a\u5904\u7406\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u63a5\u53d7\u5f53\u524d\u72b6\u6001\u548c Action \u7684 payload\uff08\u5982\u679c\u6709\uff09\uff0c\u5e76\u8fd4\u56de\u65b0\u7684\u72b6\u6001\u3002<\/p>\n\n\n\n<p><strong>\u4f7f\u7528 Reducer<\/strong><\/p>\n\n\n\n<p>\u5728 Angular \u5e94\u7528\u4e2d\uff0c\u60a8\u9700\u8981\u5728\u6a21\u5757\u7684\u914d\u7f6e\u4e2d\u6ce8\u518c Reducer\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { StoreModule } from '@ngrx\/store'; import { counterReducer } from '.\/reducers\/counter.reducer'; @NgModule({ imports: [ StoreModule.forRoot({ counter: counterReducer }), \/\/ other imports ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u4f7f\u7528 <code>StoreModule.forRoot<\/code> \u65b9\u6cd5\u6765\u6ce8\u518c <code>counterReducer<\/code>\u3002\u8fd9\u6837\uff0c\u8be5 Reducer \u5c31\u4f1a\u6210\u4e3a\u5e94\u7528\u72b6\u6001\u7684\u4e00\u90e8\u5206\uff0c\u5e76\u7528\u4e8e\u5904\u7406\u4e0e <code>counter<\/code> \u76f8\u5173\u7684 Actions\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u56db\u7ae0\u7b2c\u4e09\u5c0f\u8282 &#8220;Reducers&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u56db\u7ae0\uff1aNgRx\u57fa\u7840\u76844.4 EffectsChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.4 Effects<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728 NgRx \u4e2d\uff0cEffects \u662f\u7528\u4e8e\u5904\u7406\u4e0e\u5916\u90e8\u7cfb\u7edf\uff08\u5982\u670d\u52a1\u5668\u3001\u6570\u636e\u5e93\u7b49\uff09\u7684\u4ea4\u4e92\u7684\u670d\u52a1\u3002Effects \u76d1\u542c\u5206\u53d1\u5230 Store \u7684 Actions\uff0c\u5e76\u6839\u636e\u8fd9\u4e9b Actions \u6267\u884c\u4e00\u7cfb\u5217\u64cd\u4f5c\uff0c\u8fd9\u4e9b\u64cd\u4f5c\u53ef\u80fd\u5305\u62ec\u5f02\u6b65\u8c03\u7528\u3001\u8bbf\u95ee\u6301\u4e45\u5316\u6570\u636e\u6216\u89e6\u53d1\u5176\u4ed6 Actions\u3002<\/p>\n\n\n\n<p>Effects \u662f\u57fa\u4e8e RxJS Observables \u7684\uff0c\u56e0\u6b64\u5b83\u4eec\u53ef\u4ee5\u8f7b\u6613\u5730\u5904\u7406\u5f02\u6b65\u64cd\u4f5c\u548c\u590d\u6742\u7684\u6570\u636e\u6d41\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>\u5b89\u88c5\u548c\u8bbe\u7f6e Effects<\/strong><\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u60a8\u9700\u8981\u5b89\u88c5 NgRx Effects \u5e93\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install @ngrx\/effects --save<\/code><\/p>\n\n\n\n<p>\u7136\u540e\uff0c\u5728\u60a8\u7684 Angular \u6a21\u5757\u4e2d\u5bfc\u5165 <code>EffectsModule<\/code>\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { EffectsModule } from '@ngrx\/effects'; import { CounterEffects } from '.\/effects\/counter.effects'; @NgModule({ imports: [ EffectsModule.forRoot([CounterEffects]), \/\/ other imports ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p><strong>\u5b9a\u4e49\u4e00\u4e2a Effect<\/strong><\/p>\n\n\n\n<p>\u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684 Effect \u793a\u4f8b\uff0c\u8be5 Effect \u76d1\u542c <code>increment<\/code> Action\uff0c\u5e76\u5728\u6bcf\u6b21\u8be5 Action \u88ab\u5206\u53d1\u65f6\u8c03\u7528\u4e00\u4e2a\u670d\u52a1\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ effects\/counter.effects.ts import { Injectable } from '@angular\/core'; import { Actions, ofType, createEffect } from '@ngrx\/effects'; import { EMPTY } from 'rxjs'; import { map, mergeMap, catchError } from 'rxjs\/operators'; import * as CounterActions from '..\/actions\/counter.actions'; import { MyService } from '..\/services\/my.service'; @Injectable() export class CounterEffects { incrementEffect$ = createEffect(() =&gt; this.actions$.pipe( ofType(CounterActions.increment), mergeMap(() =&gt; this.myService.incrementCounter() .pipe( map(data =&gt; CounterActions.incrementSuccess({ payload: data })), catchError(() =&gt; EMPTY) )) ) ); constructor( private actions$: Actions, private myService: MyService ) {} }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u5b9a\u4e49\u4e86\u4e00\u4e2a\u540d\u4e3a <code>incrementEffect$<\/code> \u7684 Effect\u3002\u8be5 Effect \u4f7f\u7528 <code>ofType<\/code> \u64cd\u4f5c\u7b26\u6765\u76d1\u542c <code>increment<\/code> Action\u3002\u5f53\u8fd9\u4e2a Action \u88ab\u5206\u53d1\u65f6\uff0cEffect \u4f1a\u8c03\u7528 <code>MyService.incrementCounter()<\/code> \u65b9\u6cd5\u6765\u6267\u884c\u5f02\u6b65\u64cd\u4f5c\uff0c\u5e76\u5728\u64cd\u4f5c\u6210\u529f\u65f6\u5206\u53d1\u4e00\u4e2a\u65b0\u7684 <code>incrementSuccess<\/code> Action\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u56db\u7ae0\u7b2c\u56db\u5c0f\u8282 &#8220;Effects&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u56db\u7ae0\uff1aNgRx\u57fa\u7840\u76844.5 StoreChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.5 Store<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728 NgRx \u4e2d\uff0cStore \u662f\u4e00\u4e2a\u7528\u4e8e\u5b58\u50a8\u5e94\u7528\u72b6\u6001\u7684\u4e0d\u53ef\u53d8\u5bf9\u8c61\u3002\u5b83\u662f\u4e00\u4e2a RxJS Observable\uff0c\u60a8\u53ef\u4ee5\u8ba2\u9605\u5b83\u4ee5\u83b7\u53d6\u5e94\u7528\u72b6\u6001\u7684\u66f4\u65b0\u3002Store \u4e5f\u63d0\u4f9b\u4e86\u4e00\u4e2a <code>dispatch<\/code> \u65b9\u6cd5\uff0c\u7528\u4e8e\u5206\u53d1 Actions\uff0c\u4ee5\u89e6\u53d1\u72b6\u6001\u7684\u6539\u53d8\u3002<\/p>\n\n\n\n<p>Store \u662f NgRx \u67b6\u6784\u4e2d\u7684\u4e2d\u5fc3\u90e8\u5206\uff0c\u5b83\u8fde\u63a5\u4e86 Actions\u3001Reducers \u548c Effects\uff0c\u4f7f\u5b83\u4eec\u80fd\u591f\u5171\u540c\u5de5\u4f5c\u4ee5\u7ba1\u7406\u5e94\u7528\u72b6\u6001\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>\u8bbe\u7f6e Store<\/strong><\/p>\n\n\n\n<p>\u5728 Angular \u5e94\u7528\u4e2d\uff0c\u60a8\u9700\u8981\u5728\u6a21\u5757\u7684\u914d\u7f6e\u4e2d\u8bbe\u7f6e Store\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { StoreModule } from '@ngrx\/store'; import { counterReducer } from '.\/reducers\/counter.reducer'; @NgModule({ imports: [ StoreModule.forRoot({ counter: counterReducer }), \/\/ other imports ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528 <code>StoreModule.forRoot<\/code> \u65b9\u6cd5\u6765\u8bbe\u7f6e Store\uff0c\u5e76\u5c06 <code>counterReducer<\/code> \u6ce8\u518c\u4e3a\u7ba1\u7406 <code>counter<\/code> \u5b57\u6bb5\u7684 Reducer\u3002<\/p>\n\n\n\n<p><strong>\u8ba2\u9605 Store<\/strong><\/p>\n\n\n\n<p>\u60a8\u53ef\u4ee5\u5728 Angular \u7ec4\u4ef6\u4e2d\u8ba2\u9605 Store\uff0c\u4ee5\u83b7\u53d6\u72b6\u6001\u7684\u66f4\u65b0\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ components\/counter.component.ts import { Component } from '@angular\/core'; import { Store } from '@ngrx\/store'; import { Observable } from 'rxjs'; @Component({ selector: 'app-counter', template: ` &lt;div&gt;{{ counter$ | async }}&lt;\/div&gt; `, }) export class CounterComponent { counter$: Observable&lt;number&gt;; constructor(private store: Store&lt;{ counter: number }&gt;) { this.counter$ = store.select('counter'); } }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u7ec4\u4ef6\u4e2d\uff0c\u6211\u4eec\u6ce8\u5165\u4e86 NgRx \u7684 <code>Store<\/code> \u670d\u52a1\uff0c\u5e76\u4f7f\u7528 <code>select<\/code> \u65b9\u6cd5\u6765\u8ba2\u9605 <code>counter<\/code> \u5b57\u6bb5\u7684\u72b6\u6001\u3002\u6211\u4eec\u4f7f\u7528 Angular \u7684 <code>async<\/code> \u7ba1\u9053\u6765\u81ea\u52a8\u8ba2\u9605\u548c\u53d6\u6d88\u8ba2\u9605\u8fd9\u4e2a Observable\u3002<\/p>\n\n\n\n<p><strong>\u5206\u53d1 Actions<\/strong><\/p>\n\n\n\n<p>\u60a8\u8fd8\u53ef\u4ee5\u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528 Store \u7684 <code>dispatch<\/code> \u65b9\u6cd5\u6765\u5206\u53d1 Actions\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ components\/counter.component.ts (\u7eed) import * as CounterActions from '..\/actions\/counter.actions'; \/\/ ... (\u5728\u7ec4\u4ef6\u7c7b\u4e2d) increment() { this.store.dispatch(CounterActions.increment()); }<\/code><\/p>\n\n\n\n<p>\u8fd9\u6837\uff0c\u6bcf\u5f53 <code>increment<\/code> \u65b9\u6cd5\u88ab\u8c03\u7528\u65f6\uff0c\u4e00\u4e2a <code>increment<\/code> Action \u5c31\u4f1a\u88ab\u5206\u53d1\u5230 Store\uff0c\u4ece\u800c\u89e6\u53d1\u72b6\u6001\u7684\u6539\u53d8\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u56db\u7ae0\u7b2c\u4e94\u5c0f\u8282 &#8220;Store&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e94\u7ae0\uff1aNgRx\u8fdb\u9636\u76845.1 \u5f02\u6b65\u64cd\u4f5cChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5.1 \u5f02\u6b65\u64cd\u4f5c<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u5b9e\u9645\u5e94\u7528\u4e2d\uff0c\u5f02\u6b65\u64cd\u4f5c\u662f\u975e\u5e38\u5e38\u89c1\u7684\uff0c\u4f8b\u5982 API \u8c03\u7528\u3001\u6587\u4ef6\u8bfb\u5199\u7b49\u3002NgRx \u63d0\u4f9b\u4e86\u4e00\u79cd\u4f18\u96c5\u7684\u65b9\u5f0f\u6765\u5904\u7406\u8fd9\u4e9b\u5f02\u6b65\u64cd\u4f5c\uff0c\u5373\u901a\u8fc7\u4f7f\u7528 Effects\u3002<\/p>\n\n\n\n<p>Effects \u5141\u8bb8\u60a8\u76d1\u542c Actions\uff0c\u5e76\u5728\u65b0\u7684 Action \u88ab\u5206\u53d1\u5230 Store \u65f6\u6267\u884c\u4e00\u4e9b\u526f\u4f5c\u7528\uff08\u5982\u5f02\u6b65\u64cd\u4f5c\uff09\u3002\u8fd9\u6837\uff0c\u60a8\u53ef\u4ee5\u5c06\u4e1a\u52a1\u903b\u8f91\u4e0e\u72b6\u6001\u7ba1\u7406\u903b\u8f91\u5206\u79bb\uff0c\u4f7f\u5e94\u7528\u66f4\u6613\u4e8e\u7ef4\u62a4\u548c\u6d4b\u8bd5\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>\u5b89\u88c5 NgRx Effects<\/strong><\/p>\n\n\n\n<p>\u5982\u679c\u60a8\u8fd8\u6ca1\u6709\u5b89\u88c5 NgRx Effects\uff0c\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u547d\u4ee4\u8fdb\u884c\u5b89\u88c5\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install @ngrx\/effects --save<\/code><\/p>\n\n\n\n<p><strong>\u521b\u5efa\u4e00\u4e2a\u5f02\u6b65 Effect<\/strong><\/p>\n\n\n\n<p>\u5047\u8bbe\u60a8\u6709\u4e00\u4e2a <code>fetchData<\/code> \u7684\u5f02\u6b65\u64cd\u4f5c\uff0c\u60a8\u53ef\u4ee5\u8fd9\u6837\u521b\u5efa\u4e00\u4e2a Effect \u6765\u5904\u7406\u5b83\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ effects\/data.effects.ts import { Injectable } from '@angular\/core'; import { Actions, ofType, createEffect } from '@ngrx\/effects'; import { EMPTY } from 'rxjs'; import { map, mergeMap, catchError } from 'rxjs\/operators'; import * as DataActions from '..\/actions\/data.actions'; import { DataService } from '..\/services\/data.service'; @Injectable() export class DataEffects { fetchDataEffect$ = createEffect(() =&gt; this.actions$.pipe( ofType(DataActions.fetchData), mergeMap(() =&gt; this.dataService.fetchData() .pipe( map(data =&gt; DataActions.fetchDataSuccess({ payload: data })), catchError(() =&gt; EMPTY) )) ) ); constructor( private actions$: Actions, private dataService: DataService ) {} }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c<code>fetchDataEffect$<\/code> Effect \u76d1\u542c <code>fetchData<\/code> Action\u3002\u5f53\u8fd9\u4e2a Action \u88ab\u5206\u53d1\u65f6\uff0cEffect \u4f1a\u8c03\u7528 <code>DataService.fetchData()<\/code> \u65b9\u6cd5\u6765\u6267\u884c\u5f02\u6b65\u64cd\u4f5c\uff0c\u5e76\u5728\u64cd\u4f5c\u6210\u529f\u65f6\u5206\u53d1\u4e00\u4e2a\u65b0\u7684 <code>fetchDataSuccess<\/code> Action\u3002<\/p>\n\n\n\n<p><strong>\u6ce8\u518c Effect<\/strong><\/p>\n\n\n\n<p>\u6700\u540e\uff0c\u4e0d\u8981\u5fd8\u8bb0\u5728\u60a8\u7684 Angular \u6a21\u5757\u4e2d\u6ce8\u518c\u8fd9\u4e2a Effect\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { EffectsModule } from '@ngrx\/effects'; import { DataEffects } from '.\/effects\/data.effects'; @NgModule({ imports: [ EffectsModule.forRoot([DataEffects]), \/\/ other imports ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p>\u8fd9\u6837\uff0c\u60a8\u5c31\u6210\u529f\u5730\u521b\u5efa\u4e86\u4e00\u4e2a\u7528\u4e8e\u5904\u7406\u5f02\u6b65\u64cd\u4f5c\u7684 Effect\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u4e94\u7ae0\u7b2c\u4e00\u5c0f\u8282 &#8220;\u5f02\u6b65\u64cd\u4f5c&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e94\u7ae0\uff1aNgRx\u8fdb\u9636\u76845.2 \u4e0eAngular\u670d\u52a1\u96c6\u6210ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5.2 \u4e0eAngular\u670d\u52a1\u96c6\u6210<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728 Angular \u5e94\u7528\u4e2d\uff0c\u670d\u52a1\uff08Services\uff09\u662f\u7528\u4e8e\u5c01\u88c5\u590d\u6742\u903b\u8f91\u548c\u4e0e\u5916\u90e8\u7cfb\u7edf\u4ea4\u4e92\u7684\u4e00\u79cd\u65b9\u5f0f\u3002\u5728 NgRx \u67b6\u6784\u4e2d\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7 Effects \u8f7b\u677e\u5730\u4e0e Angular \u670d\u52a1\u96c6\u6210\uff0c\u4ee5\u5b9e\u73b0\u66f4\u9ad8\u7ea7\u7684\u529f\u80fd\u548c\u903b\u8f91\u3002<\/p>\n\n\n\n<p>\u901a\u8fc7\u8fd9\u79cd\u96c6\u6210\uff0c\u60a8\u53ef\u4ee5\u5c06\u4e1a\u52a1\u903b\u8f91\u548c\u6570\u636e\u8bbf\u95ee\u903b\u8f91\u4ece\u7ec4\u4ef6\u4e2d\u5206\u79bb\u51fa\u6765\uff0c\u4f7f\u7ec4\u4ef6\u66f4\u52a0\u8f7b\u91cf\u7ea7\u548c\u53ef\u6d4b\u8bd5\uff0c\u540c\u65f6\u4e5f\u4f7f\u5f97\u72b6\u6001\u7ba1\u7406\u66f4\u52a0\u9ad8\u6548\u548c\u53ef\u7ef4\u62a4\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>\u521b\u5efa\u4e00\u4e2a Angular \u670d\u52a1<\/strong><\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u8ba9\u6211\u4eec\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684 Angular \u670d\u52a1\uff0c\u8be5\u670d\u52a1\u7528\u4e8e\u4ece API \u83b7\u53d6\u6570\u636e\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ services\/data.service.ts import { Injectable } from '@angular\/core'; import { HttpClient } from '@angular\/common\/http'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root', }) export class DataService { constructor(private http: HttpClient) {} fetchData(): Observable&lt;any&gt; { return this.http.get('https:\/\/api.example.com\/data'); } }<\/code><\/p>\n\n\n\n<p><strong>\u5728 Effect \u4e2d\u4f7f\u7528 Angular \u670d\u52a1<\/strong><\/p>\n\n\n\n<p>\u63a5\u4e0b\u6765\uff0c\u60a8\u53ef\u4ee5\u5728 Effect \u4e2d\u4f7f\u7528\u8fd9\u4e2a Angular \u670d\u52a1\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ effects\/data.effects.ts import { Injectable } from '@angular\/core'; import { Actions, ofType, createEffect } from '@ngrx\/effects'; import { EMPTY } from 'rxjs'; import { map, mergeMap, catchError } from 'rxjs\/operators'; import * as DataActions from '..\/actions\/data.actions'; import { DataService } from '..\/services\/data.service'; @Injectable() export class DataEffects { fetchDataEffect$ = createEffect(() =&gt; this.actions$.pipe( ofType(DataActions.fetchData), mergeMap(() =&gt; this.dataService.fetchData() .pipe( map(data =&gt; DataActions.fetchDataSuccess({ payload: data })), catchError(() =&gt; EMPTY) )) ) ); constructor( private actions$: Actions, private dataService: DataService ) {} }<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c<code>fetchDataEffect$<\/code> Effect \u76d1\u542c <code>fetchData<\/code> Action\uff0c\u5e76\u4f7f\u7528 <code>DataService<\/code> \u7684 <code>fetchData<\/code> \u65b9\u6cd5\u6765\u83b7\u53d6\u6570\u636e\u3002\u83b7\u53d6\u6210\u529f\u540e\uff0c\u5b83\u4f1a\u5206\u53d1\u4e00\u4e2a\u65b0\u7684 <code>fetchDataSuccess<\/code> Action\uff0c\u5e76\u9644\u5e26\u83b7\u53d6\u5230\u7684\u6570\u636e\u4f5c\u4e3a payload\u3002<\/p>\n\n\n\n<p>\u8fd9\u6837\uff0c\u60a8\u5c31\u6210\u529f\u5730\u5c06 Angular \u670d\u52a1\u4e0e NgRx Effect \u96c6\u6210\u5728\u4e00\u8d77\uff0c\u5b9e\u73b0\u4e86\u66f4\u9ad8\u7ea7\u7684\u5f02\u6b65\u64cd\u4f5c\u548c\u72b6\u6001\u7ba1\u7406\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u4e94\u7ae0\u7b2c\u4e8c\u5c0f\u8282 &#8220;\u4e0e Angular \u670d\u52a1\u96c6\u6210&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e94\u7ae0\uff1aNgRx\u8fdb\u9636\u76845.3 \u6027\u80fd\u4f18\u5316ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5.3 \u6027\u80fd\u4f18\u5316<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u5927\u578b\u6216\u590d\u6742\u7684 Angular \u5e94\u7528\u4e2d\uff0c\u6027\u80fd\u4f18\u5316\u662f\u4e00\u4e2a\u91cd\u8981\u7684\u8003\u8651\u56e0\u7d20\u3002NgRx \u63d0\u4f9b\u4e86\u591a\u79cd\u5de5\u5177\u548c\u6280\u672f\u6765\u5e2e\u52a9\u60a8\u4f18\u5316\u5e94\u7528\u6027\u80fd\uff0c\u5305\u62ec\u61d2\u52a0\u8f7d\u3001\u72b6\u6001\u6301\u4e45\u5316\u3001\u4ee5\u53ca\u4f7f\u7528 Selectors \u8fdb\u884c\u9ad8\u6548\u7684\u72b6\u6001\u67e5\u8be2\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>\u4f7f\u7528\u61d2\u52a0\u8f7d\uff08Lazy Loading\uff09<\/strong><\/p>\n\n\n\n<p>NgRx \u652f\u6301\u61d2\u52a0\u8f7d\u7279\u5b9a\u6a21\u5757\u7684\u72b6\u6001\u548c Effects\u3002\u8fd9\u6837\uff0c\u60a8\u53ef\u4ee5\u6839\u636e\u9700\u8981\u52a8\u6001\u5730\u52a0\u8f7d\u548c\u521d\u59cb\u5316\u72b6\u6001\uff0c\u4ece\u800c\u51cf\u5c11\u5e94\u7528\u7684\u521d\u59cb\u52a0\u8f7d\u65f6\u95f4\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ feature.module.ts import { NgModule } from '@angular\/core'; import { StoreModule } from '@ngrx\/store'; import { EffectsModule } from '@ngrx\/effects'; import { featureReducer } from '.\/reducers\/feature.reducer'; import { FeatureEffects } from '.\/effects\/feature.effects'; @NgModule({ imports: [ StoreModule.forFeature('feature', featureReducer), EffectsModule.forFeature([FeatureEffects]), ], }) export class FeatureModule {}<\/code><\/p>\n\n\n\n<p><strong>\u4f7f\u7528 Selectors \u8fdb\u884c\u72b6\u6001\u67e5\u8be2<\/strong><\/p>\n\n\n\n<p>Selectors \u53ef\u4ee5\u5e2e\u52a9\u60a8\u9ad8\u6548\u5730\u4ece Store \u4e2d\u67e5\u8be2\u72b6\u6001\u3002\u901a\u8fc7\u4f7f\u7528 <code>createSelector<\/code> \u51fd\u6570\uff0c\u60a8\u53ef\u4ee5\u521b\u5efa\u53ef\u8bb0\u5fc6\uff08memoized\uff09\u7684 Selectors\uff0c\u8fd9\u6837\u53ea\u6709\u5f53\u72b6\u6001\u53d1\u751f\u53d8\u5316\u65f6\uff0cSelector \u624d\u4f1a\u91cd\u65b0\u8ba1\u7b97\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ selectors\/feature.selectors.ts import { createSelector } from '@ngrx\/store'; export const selectFeature = (state) =&gt; state.feature; export const selectFeatureProperty = createSelector( selectFeature, (feature) =&gt; feature.property );<\/code><\/p>\n\n\n\n<p><strong>\u72b6\u6001\u6301\u4e45\u5316<\/strong><\/p>\n\n\n\n<p>\u5728\u67d0\u4e9b\u60c5\u51b5\u4e0b\uff0c\u60a8\u53ef\u80fd\u5e0c\u671b\u5c06\u5e94\u7528\u72b6\u6001\u6301\u4e45\u5316\u5230\u672c\u5730\u5b58\u50a8\uff08\u5982 localStorage\uff09\u4e2d\uff0c\u4ee5\u63d0\u4f9b\u66f4\u597d\u7684\u7528\u6237\u4f53\u9a8c\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528 NgRx \u7684 <code>@ngrx\/store-localstorage<\/code> \u5e93\u6765\u8f7b\u677e\u5b9e\u73b0\u8fd9\u4e00\u70b9\u3002<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install @ngrx\/store-localstorage --save<\/code><\/p>\n\n\n\n<p>\u7136\u540e\u5728\u60a8\u7684\u6a21\u5757\u914d\u7f6e\u4e2d\u6dfb\u52a0\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { localStorageSync } from '@ngrx\/store-localstorage'; import { StoreModule, ActionReducerMap } from '@ngrx\/store'; const reducers: ActionReducerMap&lt;any&gt; = { \/\/ your reducers }; export function localStorageSyncReducer(reducer: ActionReducer&lt;any&gt;): ActionReducer&lt;any&gt; { return localStorageSync({ keys: ['your-key'], rehydrate: true })(reducer); } @NgModule({ imports: [ StoreModule.forRoot(reducers, { metaReducers: [localStorageSyncReducer] }), \/\/ other imports ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p>\u8fd9\u6837\uff0c\u60a8\u5c31\u53ef\u4ee5\u5c06\u6307\u5b9a\u7684\u72b6\u6001\u7247\u6bb5\u6301\u4e45\u5316\u5230\u672c\u5730\u5b58\u50a8\u4e2d\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u4e94\u7ae0\u7b2c\u4e09\u5c0f\u8282 &#8220;\u6027\u80fd\u4f18\u5316&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e94\u7ae0\uff1aNgRx\u8fdb\u9636\u76845.4 \u6d4b\u8bd5\u7b56\u7565ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5.4 \u6d4b\u8bd5\u7b56\u7565<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u6d4b\u8bd5\u662f\u4efb\u4f55\u5e94\u7528\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u4e0d\u53ef\u6216\u7f3a\u7684\u4e00\u90e8\u5206\uff0cNgRx \u4e5f\u4e0d\u4f8b\u5916\u3002\u7531\u4e8e NgRx \u67b6\u6784\u6e05\u6670\u5730\u5206\u79bb\u4e86\u72b6\u6001\u3001\u52a8\u4f5c\u548c\u526f\u4f5c\u7528\uff0c\u56e0\u6b64\u5b83\u975e\u5e38\u9002\u5408\u8fdb\u884c\u5355\u5143\u6d4b\u8bd5\u548c\u96c6\u6210\u6d4b\u8bd5\u3002\u5728\u8fd9\u4e00\u8282\u4e2d\uff0c\u6211\u4eec\u5c06\u63a2\u8ba8\u5982\u4f55\u6d4b\u8bd5 NgRx \u4e2d\u7684\u5404\u4e2a\u90e8\u5206\uff0c\u5305\u62ec Actions\u3001Reducers\u3001Effects \u548c Selectors\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>\u6d4b\u8bd5 Actions<\/strong><\/p>\n\n\n\n<p>\u6d4b\u8bd5 Actions \u76f8\u5bf9\u7b80\u5355\uff0c\u56e0\u4e3a\u5b83\u4eec\u901a\u5e38\u53ea\u662f\u7b80\u5355\u7684\u5bf9\u8c61\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528\u4efb\u4f55 JavaScript \u6d4b\u8bd5\u6846\u67b6\u6765\u8fdb\u884c\u6d4b\u8bd5\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ actions\/counter.actions.spec.ts import * as CounterActions from '.\/counter.actions'; describe('Counter Actions', () =&gt; { it('should create an increment action', () =&gt; { const action = CounterActions.increment(); expect(action.type).toEqual('[Counter] Increment'); }); });<\/code><\/p>\n\n\n\n<p><strong>\u6d4b\u8bd5 Reducers<\/strong><\/p>\n\n\n\n<p>Reducers \u662f\u7eaf\u51fd\u6570\uff0c\u56e0\u6b64\u5b83\u4eec\u4e5f\u5f88\u5bb9\u6613\u6d4b\u8bd5\u3002\u60a8\u53ef\u4ee5\u4e3a Reducer \u51fd\u6570\u63d0\u4f9b\u4e00\u4e2a\u521d\u59cb\u72b6\u6001\u548c\u4e00\u4e2a Action\uff0c\u7136\u540e\u68c0\u67e5\u8fd4\u56de\u7684\u65b0\u72b6\u6001\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ reducers\/counter.reducer.spec.ts import { counterReducer } from '.\/counter.reducer'; import * as CounterActions from '..\/actions\/counter.actions'; describe('Counter Reducer', () =&gt; { it('should increment the state by 1', () =&gt; { const initialState = 0; const action = CounterActions.increment(); const newState = counterReducer(initialState, action); expect(newState).toEqual(1); }); });<\/code><\/p>\n\n\n\n<p><strong>\u6d4b\u8bd5 Effects<\/strong><\/p>\n\n\n\n<p>\u6d4b\u8bd5 Effects \u901a\u5e38\u9700\u8981\u6a21\u62df\uff08mock\uff09\u4f9d\u8d56\u9879\uff0c\u5982\u670d\u52a1\u6216\u5176\u4ed6\u5916\u90e8\u8d44\u6e90\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528 <code>provideMockActions<\/code> \u51fd\u6570\u548c Angular \u7684\u4f9d\u8d56\u6ce8\u5165\u6765\u5b9e\u73b0\u8fd9\u4e00\u70b9\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ effects\/counter.effects.spec.ts import { TestBed } from '@angular\/core\/testing'; import { provideMockActions } from '@ngrx\/effects\/testing'; import { Observable } from 'rxjs'; import { CounterEffects } from '.\/counter.effects'; import * as CounterActions from '..\/actions\/counter.actions'; describe('Counter Effects', () =&gt; { let actions$: Observable&lt;any&gt;; let effects: CounterEffects; beforeEach(() =&gt; { TestBed.configureTestingModule({ providers: [ CounterEffects, provideMockActions(() =&gt; actions$), \/\/ other providers ], }); effects = TestBed.inject(CounterEffects); }); it('should be created', () =&gt; { expect(effects).toBeTruthy(); }); });<\/code><\/p>\n\n\n\n<p><strong>\u6d4b\u8bd5 Selectors<\/strong><\/p>\n\n\n\n<p>\u7531\u4e8e Selectors \u662f\u7eaf\u51fd\u6570\uff0c\u56e0\u6b64\u6d4b\u8bd5\u5b83\u4eec\u4e0e\u6d4b\u8bd5 Reducers \u7c7b\u4f3c\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ selectors\/counter.selectors.spec.ts import * as fromCounter from '.\/counter.selectors'; describe('Counter Selectors', () =&gt; { it('should select the counter value', () =&gt; { const initialState = { counter: 1 }; const result = fromCounter.selectCounter(initialState); expect(result).toEqual(1); }); });<\/code><\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u4e94\u7ae0\u7b2c\u56db\u5c0f\u8282 &#8220;\u6d4b\u8bd5\u7b56\u7565&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u516d\u7ae0\uff1a\u5b9e\u6218\u793a\u4f8b\u7684\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u5e94\u7528ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u516d\u7ae0\uff1a\u5b9e\u6218\u793a\u4f8b &#8211; \u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u5e94\u7528<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u672c\u7ae0\u4e2d\uff0c\u6211\u4eec\u5c06\u901a\u8fc7\u4e00\u4e2a\u7b80\u5355\u7684\u5f85\u529e\u4e8b\u9879\u5e94\u7528\uff08To-Do List App\uff09\u6765\u6f14\u793a NgRx \u7684\u5b9e\u9645\u5e94\u7528\u3002\u8fd9\u4e2a\u5e94\u7528\u5c06\u5305\u62ec\u6dfb\u52a0\u3001\u5220\u9664\u548c\u6807\u8bb0\u5f85\u529e\u4e8b\u9879\u4e3a\u5b8c\u6210\u7684\u529f\u80fd\u3002\u6211\u4eec\u5c06\u4f7f\u7528 NgRx \u6765\u7ba1\u7406\u5e94\u7528\u7684\u72b6\u6001\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>1. \u521d\u59cb\u5316 Angular \u5e94\u7528<\/strong><\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u4f7f\u7528 Angular CLI \u521b\u5efa\u4e00\u4e2a\u65b0\u7684 Angular \u5e94\u7528\u3002<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>ng new todo-app<\/code><\/p>\n\n\n\n<p><strong>2. \u5b89\u88c5 NgRx<\/strong><\/p>\n\n\n\n<p>\u8fdb\u5165\u5e94\u7528\u76ee\u5f55\u5e76\u5b89\u88c5 NgRx\u3002<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>cd todo-app npm install @ngrx\/store @ngrx\/effects --save<\/code><\/p>\n\n\n\n<p><strong>3. \u5b9a\u4e49 Actions<\/strong><\/p>\n\n\n\n<p>\u5728 <code>src\/app\/actions<\/code> \u76ee\u5f55\u4e0b\u521b\u5efa <code>todo.actions.ts<\/code>\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ src\/app\/actions\/todo.actions.ts import { createAction, props } from '@ngrx\/store'; export const addTodo = createAction( '[Todo] Add Todo', props&lt;{ text: string }&gt;() ); export const toggleTodo = createAction( '[Todo] Toggle Todo', props&lt;{ id: number }&gt;() ); export const removeTodo = createAction( '[Todo] Remove Todo', props&lt;{ id: number }&gt;() );<\/code><\/p>\n\n\n\n<p><strong>4. \u5b9a\u4e49 Reducer<\/strong><\/p>\n\n\n\n<p>\u5728 <code>src\/app\/reducers<\/code> \u76ee\u5f55\u4e0b\u521b\u5efa <code>todo.reducer.ts<\/code>\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ src\/app\/reducers\/todo.reducer.ts import { createReducer, on } from '@ngrx\/store'; import * as TodoActions from '..\/actions\/todo.actions'; export const initialState = []; const _todoReducer = createReducer( initialState, on(TodoActions.addTodo, (state, { text }) =&gt; [...state, { id: state.length + 1, text, completed: false }]), on(TodoActions.toggleTodo, (state, { id }) =&gt; state.map(todo =&gt; todo.id === id ? { ...todo, completed: !todo.completed } : todo)), on(TodoActions.removeTodo, (state, { id }) =&gt; state.filter(todo =&gt; todo.id !== id)) ); export function todoReducer(state, action) { return _todoReducer(state, action); }<\/code><\/p>\n\n\n\n<p><strong>5. \u6ce8\u518c Store \u548c Reducer<\/strong><\/p>\n\n\n\n<p>\u5728 <code>src\/app\/app.module.ts<\/code> \u4e2d\u6ce8\u518c Store \u548c Reducer\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ src\/app\/app.module.ts import { StoreModule } from '@ngrx\/store'; import { todoReducer } from '.\/reducers\/todo.reducer'; @NgModule({ imports: [ StoreModule.forRoot({ todos: todoReducer }), \/\/ other imports ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p><strong>6. \u521b\u5efa UI \u548c\u903b\u8f91<\/strong><\/p>\n\n\n\n<p>\u5728 <code>src\/app\/components<\/code> \u76ee\u5f55\u4e0b\u521b\u5efa <code>todo-list.component.ts<\/code> \u548c <code>todo-list.component.html<\/code>\uff0c\u5e76\u5b9e\u73b0 UI \u548c\u903b\u8f91\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ src\/app\/components\/todo-list.component.ts import { Component } from '@angular\/core'; import { Store } from '@ngrx\/store'; import * as TodoActions from '..\/actions\/todo.actions'; @Component({ selector: 'app-todo-list', templateUrl: '.\/todo-list.component.html', }) export class TodoListComponent { constructor(private store: Store&lt;{ todos: any[] }&gt;) {} addTodo(text: string) { this.store.dispatch(TodoActions.addTodo({ text })); } toggleTodo(id: number) { this.store.dispatch(TodoActions.toggleTodo({ id })); } removeTodo(id: number) { this.store.dispatch(TodoActions.removeTodo({ id })); } }<\/code><\/p>\n\n\n\n<p>htmlCopy code<\/p>\n\n\n\n<p><code>&lt;!-- src\/app\/components\/todo-list.component.html --&gt; &lt;!-- UI code here --&gt;<\/code><\/p>\n\n\n\n<p>\u8fd9\u6837\uff0c\u60a8\u5c31\u521b\u5efa\u4e86\u4e00\u4e2a\u7b80\u5355\u7684\u5f85\u529e\u4e8b\u9879\u5e94\u7528\uff0c\u6f14\u793a\u4e86\u5982\u4f55\u4f7f\u7528 NgRx \u8fdb\u884c\u72b6\u6001\u7ba1\u7406\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u516d\u7ae0 &#8220;\u5b9e\u6218\u793a\u4f8b&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u516d\u7ae0\uff1a\u5b9e\u6218\u793a\u4f8b\u7684\u5e94\u7528NgRx\u8fdb\u884c\u72b6\u6001\u7ba1\u7406ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u516d\u7ae0\uff1a\u5b9e\u6218\u793a\u4f8b &#8211; \u5e94\u7528 NgRx \u8fdb\u884c\u72b6\u6001\u7ba1\u7406<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u4e0a\u4e00\u8282\u4e2d\uff0c\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2a\u7b80\u5355\u7684\u5f85\u529e\u4e8b\u9879\u5e94\u7528\u3002\u73b0\u5728\uff0c\u6211\u4eec\u5c06\u66f4\u8be6\u7ec6\u5730\u89e3\u91ca\u5982\u4f55\u5728\u8fd9\u4e2a\u5e94\u7528\u4e2d\u5e94\u7528 NgRx \u8fdb\u884c\u72b6\u6001\u7ba1\u7406\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>1. \u5e94\u7528\u72b6\u6001\u6a21\u578b<\/strong><\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u5b9a\u4e49\u4e00\u4e2a\u5e94\u7528\u72b6\u6001\u6a21\u578b\u3002\u8fd9\u901a\u5e38\u662f\u4e00\u4e2a TypeScript \u63a5\u53e3\uff0c\u63cf\u8ff0\u4e86\u5e94\u7528\u72b6\u6001\u7684\u7ed3\u6784\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ src\/app\/models\/app-state.model.ts export interface Todo { id: number; text: string; completed: boolean; } export interface AppState { todos: Todo[]; }<\/code><\/p>\n\n\n\n<p><strong>2. \u4f7f\u7528 Store \u670d\u52a1<\/strong><\/p>\n\n\n\n<p>\u5728 Angular \u7ec4\u4ef6\u4e2d\uff0c\u4f7f\u7528 NgRx \u7684 <code>Store<\/code> \u670d\u52a1\u6765\u5206\u53d1 Actions \u548c\u8ba2\u9605\u72b6\u6001\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ src\/app\/components\/todo-list.component.ts import { Component } from '@angular\/core'; import { Store } from '@ngrx\/store'; import { AppState } from '..\/models\/app-state.model'; import * as TodoActions from '..\/actions\/todo.actions'; @Component({ selector: 'app-todo-list', templateUrl: '.\/todo-list.component.html', }) export class TodoListComponent { todos$ = this.store.select(state =&gt; state.todos); constructor(private store: Store&lt;{ todos: AppState }&gt;) {} addTodo(text: string) { this.store.dispatch(TodoActions.addTodo({ text })); } toggleTodo(id: number) { this.store.dispatch(TodoActions.toggleTodo({ id })); } removeTodo(id: number) { this.store.dispatch(TodoActions.removeTodo({ id })); } }<\/code><\/p>\n\n\n\n<p><strong>3. \u4f7f\u7528 Selectors<\/strong><\/p>\n\n\n\n<p>\u4e3a\u4e86\u66f4\u9ad8\u6548\u5730\u4ece Store \u4e2d\u67e5\u8be2\u72b6\u6001\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 Selectors\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ src\/app\/selectors\/todo.selectors.ts import { createSelector } from '@ngrx\/store'; import { AppState } from '..\/models\/app-state.model'; export const selectTodos = (state: AppState) =&gt; state.todos; export const selectCompletedTodos = createSelector( selectTodos, todos =&gt; todos.filter(todo =&gt; todo.completed) );<\/code><\/p>\n\n\n\n<p>\u7136\u540e\uff0c\u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528\u8fd9\u4e9b Selectors\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ src\/app\/components\/todo-list.component.ts import { selectTodos, selectCompletedTodos } from '..\/selectors\/todo.selectors'; \/\/ ... todos$ = this.store.select(selectTodos); completedTodos$ = this.store.select(selectCompletedTodos);<\/code><\/p>\n\n\n\n<p><strong>4. \u4f7f\u7528 Effects \u8fdb\u884c\u5f02\u6b65\u64cd\u4f5c<\/strong><\/p>\n\n\n\n<p>\u5982\u679c\u60a8\u7684\u5e94\u7528\u9700\u8981\u8fdb\u884c\u5f02\u6b65\u64cd\u4f5c\uff08\u5982 API \u8c03\u7528\uff09\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 Effects\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ src\/app\/effects\/todo.effects.ts import { Injectable } from '@angular\/core'; import { Actions, ofType, createEffect } from '@ngrx\/effects'; import { EMPTY } from 'rxjs'; import { map, mergeMap, catchError } from 'rxjs\/operators'; import * as TodoActions from '..\/actions\/todo.actions'; import { TodoService } from '..\/services\/todo.service'; @Injectable() export class TodoEffects { loadTodos$ = createEffect(() =&gt; this.actions$.pipe( ofType(TodoActions.loadTodos), mergeMap(() =&gt; this.todoService.getAll() .pipe( map(todos =&gt; TodoActions.loadTodosSuccess({ todos })), catchError(() =&gt; EMPTY) )) ) ); constructor( private actions$: Actions, private todoService: TodoService ) {} }<\/code><\/p>\n\n\n\n<p>\u8fd9\u6837\uff0c\u60a8\u5c31\u6210\u529f\u5730\u5728\u5f85\u529e\u4e8b\u9879\u5e94\u7528\u4e2d\u5e94\u7528\u4e86 NgRx \u8fdb\u884c\u72b6\u6001\u7ba1\u7406\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u516d\u7ae0 &#8220;\u5e94\u7528 NgRx \u8fdb\u884c\u72b6\u6001\u7ba1\u7406&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u516d\u7ae0\uff1a\u5b9e\u6218\u793a\u4f8b\u7684\u5206\u6790\u4e0e\u4f18\u5316ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u516d\u7ae0\uff1a\u5b9e\u6218\u793a\u4f8b &#8211; \u5206\u6790\u4e0e\u4f18\u5316<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u5b9e\u73b0\u4e86\u4e00\u4e2a\u57fa\u7840\u7684\u5f85\u529e\u4e8b\u9879\u5e94\u7528\u5e76\u5e94\u7528\u4e86 NgRx \u8fdb\u884c\u72b6\u6001\u7ba1\u7406\u4e4b\u540e\uff0c\u4e0b\u4e00\u6b65\u662f\u8fdb\u884c\u5e94\u7528\u5206\u6790\u548c\u4f18\u5316\u3002\u8fd9\u5305\u62ec\u4ee3\u7801\u91cd\u6784\u3001\u6027\u80fd\u4f18\u5316\u3001\u4ee5\u53ca\u6dfb\u52a0\u66f4\u591a\u9ad8\u7ea7\u529f\u80fd\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>1. \u4ee3\u7801\u91cd\u6784<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u6a21\u5757\u5316<\/strong>: \u5c06\u4e0e\u5f85\u529e\u4e8b\u9879\u76f8\u5173\u7684\u6240\u6709\u4ee3\u7801\uff08\u5305\u62ec Actions\u3001Reducers\u3001Effects \u548c Selectors\uff09\u79fb\u5230\u4e00\u4e2a\u5355\u72ec\u7684\u6a21\u5757\u4e2d\uff0c\u4ee5\u63d0\u9ad8\u4ee3\u7801\u7684\u53ef\u7ef4\u62a4\u6027\u3002<\/li>\n<\/ul>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ src\/app\/todo\/todo.module.ts @NgModule({ imports: [ StoreModule.forFeature('todos', todoReducer), EffectsModule.forFeature([TodoEffects]), ], }) export class TodoModule {}<\/code><\/p>\n\n\n\n<p><strong>2. \u6027\u80fd\u4f18\u5316<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u4f7f\u7528\u61d2\u52a0\u8f7d<\/strong>: \u5982\u679c\u5e94\u7528\u53d8\u5f97\u66f4\u5927\u548c\u66f4\u590d\u6742\uff0c\u8003\u8651\u4f7f\u7528\u61d2\u52a0\u8f7d\u6765\u63d0\u9ad8\u5e94\u7528\u7684\u542f\u52a8\u6027\u80fd\u3002<\/li>\n\n\n\n<li><strong>\u4f7f\u7528 <code>OnPush<\/code> \u53d8\u66f4\u68c0\u6d4b\u7b56\u7565<\/strong>: \u5728 Angular \u7ec4\u4ef6\u4e2d\u4f7f\u7528 <code>ChangeDetectionStrategy.OnPush<\/code> \u53ef\u4ee5\u51cf\u5c11\u4e0d\u5fc5\u8981\u7684 UI \u66f4\u65b0\uff0c\u4ece\u800c\u63d0\u9ad8\u6027\u80fd\u3002<\/li>\n<\/ul>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ src\/app\/components\/todo-list.component.ts @Component({ selector: 'app-todo-list', templateUrl: '.\/todo-list.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) export class TodoListComponent { \/\/ ... }<\/code><\/p>\n\n\n\n<p><strong>3. \u6dfb\u52a0\u66f4\u591a\u9ad8\u7ea7\u529f\u80fd<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u72b6\u6001\u6301\u4e45\u5316<\/strong>: \u4f7f\u7528 <code>@ngrx\/store-localstorage<\/code> \u5e93\u6216\u81ea\u5b9a\u4e49\u903b\u8f91\u6765\u5b9e\u73b0\u72b6\u6001\u6301\u4e45\u5316\u3002<\/li>\n<\/ul>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ src\/app\/app.module.ts import { localStorageSync } from '@ngrx\/store-localstorage'; const reducers: ActionReducerMap&lt;AppState&gt; = { todos: todoReducer }; export function localStorageSyncReducer(reducer: ActionReducer&lt;any&gt;): ActionReducer&lt;any&gt; { return localStorageSync({ keys: ['todos'], rehydrate: true })(reducer); } @NgModule({ imports: [ StoreModule.forRoot(reducers, { metaReducers: [localStorageSyncReducer] }), \/\/ ... ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u6dfb\u52a0\u9519\u8bef\u5904\u7406\u548c\u65e5\u5fd7<\/strong>: \u4f7f\u7528 NgRx Effects \u7684 <code>catchError<\/code> \u64cd\u4f5c\u7b26\u6765\u5904\u7406\u5f02\u6b65\u64cd\u4f5c\u4e2d\u7684\u9519\u8bef\uff0c\u5e76\u4f7f\u7528 <code>@ngrx\/store-devtools<\/code> \u8fdb\u884c\u72b6\u6001\u8c03\u8bd5\u3002<\/li>\n<\/ul>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ src\/app\/effects\/todo.effects.ts loadTodos$ = createEffect(() =&gt; this.actions$.pipe( ofType(TodoActions.loadTodos), mergeMap(() =&gt; this.todoService.getAll() .pipe( map(todos =&gt; TodoActions.loadTodosSuccess({ todos })), catchError(error =&gt; of(TodoActions.loadTodosFailure({ error }))) )) ));<\/code><\/p>\n\n\n\n<p>\u8fd9\u4e9b\u662f\u5bf9\u7b2c\u516d\u7ae0 &#8220;\u5206\u6790\u4e0e\u4f18\u5316&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u901a\u8fc7\u8fd9\u4e9b\u6b65\u9aa4\uff0c\u60a8\u4e0d\u4ec5\u80fd\u63d0\u9ad8\u5e94\u7528\u7684\u6027\u80fd\uff0c\u8fd8\u80fd\u4f7f\u5176\u66f4\u6613\u4e8e\u7ef4\u62a4\u548c\u6269\u5c55\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u516b\u7ae0\uff1a\u5176\u4ed6\u72b6\u6001\u7ba1\u7406\u6280\u672f\u7b80\u4ecb\u76848.1 Redux\u4e0eAngularChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u516b\u7ae0\uff1a\u5176\u4ed6\u72b6\u6001\u7ba1\u7406\u6280\u672f\u7b80\u4ecb<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">8.1 Redux \u4e0e Angular<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>Redux \u662f\u4e00\u79cd\u72ec\u7acb\u4e8e\u6846\u67b6\u7684\u72b6\u6001\u7ba1\u7406\u5e93\uff0c\u6700\u521d\u662f\u4e3a React \u5e94\u7528\u8bbe\u8ba1\u7684\u3002\u7136\u800c\uff0c\u7531\u4e8e\u5176\u7b80\u5355\u548c\u9ad8\u5ea6\u53ef\u6269\u5c55\u7684\u67b6\u6784\uff0c\u5b83\u4e5f\u53ef\u4ee5\u4e0e Angular \u7ed3\u5408\u4f7f\u7528\u3002\u5728\u8fd9\u4e00\u8282\u4e2d\uff0c\u6211\u4eec\u5c06\u63a2\u8ba8\u5982\u4f55\u5728 Angular \u5e94\u7528\u4e2d\u4f7f\u7528\u539f\u751f Redux \u5e93\u8fdb\u884c\u72b6\u6001\u7ba1\u7406\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>1. \u5b89\u88c5 Redux<\/strong><\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u60a8\u9700\u8981\u5b89\u88c5 Redux \u5e93\u3002<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install redux --save<\/code><\/p>\n\n\n\n<p><strong>2. \u521b\u5efa Store<\/strong><\/p>\n\n\n\n<p>\u5728 Angular \u5e94\u7528\u4e2d\uff0c\u60a8\u53ef\u4ee5\u5728\u6839\u6a21\u5757\u7684 <code>providers<\/code> \u6570\u7ec4\u4e2d\u521b\u5efa Redux Store\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { createStore } from 'redux'; import { rootReducer } from '.\/reducers\/root.reducer'; @NgModule({ providers: [ { provide: 'AppStore', useValue: createStore(rootReducer) }, ], \/\/ ... }) export class AppModule {}<\/code><\/p>\n\n\n\n<p><strong>3. \u5b9a\u4e49 Actions \u548c Reducers<\/strong><\/p>\n\n\n\n<p>\u4e0e NgRx \u7c7b\u4f3c\uff0c\u60a8\u9700\u8981\u5b9a\u4e49 Actions \u548c Reducers\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ actions\/todo.actions.ts export const ADD_TODO = 'ADD_TODO'; \/\/ reducers\/todo.reducer.ts export function todoReducer(state = [], action) { switch (action.type) { case ADD_TODO: return [...state, action.payload]; default: return state; } }<\/code><\/p>\n\n\n\n<p><strong>4. \u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528 Store<\/strong><\/p>\n\n\n\n<p>\u60a8\u53ef\u4ee5\u4f7f\u7528 Angular \u7684\u4f9d\u8d56\u6ce8\u5165\u6765\u8bbf\u95ee Redux Store\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ components\/todo-list.component.ts import { Component, Inject } from '@angular\/core'; @Component({ selector: 'app-todo-list', template: `...`, }) export class TodoListComponent { constructor(@Inject('AppStore') private store) { this.store.subscribe(() =&gt; this.readState()); this.readState(); } readState() { const state = this.store.getState(); \/\/ Do something with the state } addTodo(text: string) { this.store.dispatch({ type: ADD_TODO, payload: text }); } }<\/code><\/p>\n\n\n\n<p><strong>5. \u4f7f\u7528 Middleware<\/strong><\/p>\n\n\n\n<p>Redux \u5141\u8bb8\u60a8\u4f7f\u7528 Middleware \u6765\u5904\u7406\u5f02\u6b65 Actions \u6216\u6dfb\u52a0\u5176\u4ed6\u526f\u4f5c\u7528\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ Configure store with middleware import thunk from 'redux-thunk'; const store = createStore( rootReducer, applyMiddleware(thunk) );<\/code><\/p>\n\n\n\n<p>\u8fd9\u6837\uff0c\u60a8\u5c31\u53ef\u4ee5\u5728 Angular \u5e94\u7528\u4e2d\u4f7f\u7528\u539f\u751f Redux \u8fdb\u884c\u72b6\u6001\u7ba1\u7406\u3002\u867d\u7136 NgRx \u662f Angular \u793e\u533a\u66f4\u5e38\u7528\u7684\u9009\u62e9\uff0c\u4f46 Redux \u7531\u4e8e\u5176\u7b80\u5355\u6027\u548c\u7075\u6d3b\u6027\uff0c\u4e5f\u662f\u4e00\u4e2a\u53ef\u884c\u7684\u9009\u9879\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u516b\u7ae0\u7b2c\u4e00\u5c0f\u8282 &#8220;Redux \u4e0e Angular&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u516b\u7ae0\uff1a\u5176\u4ed6\u72b6\u6001\u7ba1\u7406\u6280\u672f\u7b80\u4ecb\u76848.2 MobX\u4e0eAngularChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u516b\u7ae0\uff1a\u5176\u4ed6\u72b6\u6001\u7ba1\u7406\u6280\u672f\u7b80\u4ecb<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">8.2 MobX \u4e0e Angular<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>MobX \u662f\u53e6\u4e00\u79cd\u6d41\u884c\u7684\u72b6\u6001\u7ba1\u7406\u5e93\uff0c\u5b83\u4f7f\u7528\u54cd\u5e94\u5f0f\u7f16\u7a0b\u539f\u5219\u6765\u7ba1\u7406\u5e94\u7528\u72b6\u6001\u3002\u4e0e Redux \u4e0d\u540c\uff0cMobX \u63d0\u4f9b\u4e86\u4e00\u79cd\u66f4\u4e3a\u58f0\u660e\u5f0f\u548c\u81ea\u52a8\u5316\u7684\u65b9\u5f0f\u6765\u5904\u7406\u72b6\u6001\u53d8\u5316\u3002\u5728\u8fd9\u4e00\u8282\u4e2d\uff0c\u6211\u4eec\u5c06\u63a2\u8ba8\u5982\u4f55\u5728 Angular \u5e94\u7528\u4e2d\u4f7f\u7528 MobX\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>1. \u5b89\u88c5 MobX \u548c mobx-angular<\/strong><\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u60a8\u9700\u8981\u5b89\u88c5 MobX \u548c mobx-angular\u3002<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install mobx mobx-angular --save<\/code><\/p>\n\n\n\n<p><strong>2. \u521b\u5efa MobX Store<\/strong><\/p>\n\n\n\n<p>\u5728 MobX \u4e2d\uff0c\u60a8\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u6216\u591a\u4e2a Store \u6765\u7ba1\u7406\u5e94\u7528\u72b6\u6001\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ stores\/todo.store.ts import { observable, action } from 'mobx'; export class TodoStore { @observable todos = []; @action addTodo(text: string) { this.todos.push({ text, completed: false }); } @action toggleTodo(index: number) { this.todos[index].completed = !this.todos[index].completed; } }<\/code><\/p>\n\n\n\n<p><strong>3. \u5728 Angular \u4e2d\u4f7f\u7528 MobX Store<\/strong><\/p>\n\n\n\n<p>\u60a8\u53ef\u4ee5\u5728 Angular \u7ec4\u4ef6\u4e2d\u6ce8\u5165 MobX Store\uff0c\u5e76\u4f7f\u7528 <code>mobx-angular<\/code> \u63d0\u4f9b\u7684 <code>MobxAutorunDirective<\/code> \u6307\u4ee4\u6765\u81ea\u52a8\u66f4\u65b0\u89c6\u56fe\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ components\/todo-list.component.ts import { Component } from '@angular\/core'; import { TodoStore } from '..\/stores\/todo.store'; @Component({ selector: 'app-todo-list', template: ` &lt;ul *mobxAutorun&gt; &lt;li *ngFor=\"let todo of todoStore.todos\"&gt;{{ todo.text }}&lt;\/li&gt; &lt;\/ul&gt; `, }) export class TodoListComponent { constructor(public todoStore: TodoStore) {} addTodo(text: string) { this.todoStore.addTodo(text); } }<\/code><\/p>\n\n\n\n<p><strong>4. \u914d\u7f6e Angular \u6a21\u5757<\/strong><\/p>\n\n\n\n<p>\u5728 Angular \u6a21\u5757\u4e2d\uff0c\u60a8\u9700\u8981\u5bfc\u5165 <code>MobxAngularModule<\/code>\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { MobxAngularModule } from 'mobx-angular'; @NgModule({ imports: [ MobxAngularModule, \/\/ ... ], providers: [TodoStore], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p><strong>5. \u4f7f\u7528\u8ba1\u7b97\u5c5e\u6027\u548c\u53cd\u5e94<\/strong><\/p>\n\n\n\n<p>MobX \u5141\u8bb8\u60a8\u4f7f\u7528\u8ba1\u7b97\u5c5e\u6027\uff08<code>computed<\/code>\uff09\u548c\u53cd\u5e94\uff08<code>reaction<\/code>\uff09\u6765\u8fdb\u4e00\u6b65\u4f18\u5316\u548c\u54cd\u5e94\u72b6\u6001\u53d8\u5316\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ stores\/todo.store.ts import { computed } from 'mobx'; export class TodoStore { \/\/ ... @computed get completedTodos() { return this.todos.filter(todo =&gt; todo.completed); } }<\/code><\/p>\n\n\n\n<p>\u8fd9\u6837\uff0c\u60a8\u5c31\u5728 Angular \u5e94\u7528\u4e2d\u6210\u529f\u5730\u5e94\u7528\u4e86 MobX \u8fdb\u884c\u72b6\u6001\u7ba1\u7406\u3002MobX \u63d0\u4f9b\u4e86\u4e00\u79cd\u66f4\u4e3a\u7075\u6d3b\u548c\u81ea\u52a8\u5316\u7684\u65b9\u5f0f\u6765\u7ba1\u7406\u72b6\u6001\uff0c\u7279\u522b\u9002\u7528\u4e8e\u590d\u6742\u548c\u5927\u578b\u5e94\u7528\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u516b\u7ae0\u7b2c\u4e8c\u5c0f\u8282 &#8220;MobX \u4e0e Angular&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u516b\u7ae0\uff1a\u5176\u4ed6\u72b6\u6001\u7ba1\u7406\u6280\u672f\u7b80\u4ecb\u76848.3 Akita\u4e0eAngularChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u516b\u7ae0\uff1a\u5176\u4ed6\u72b6\u6001\u7ba1\u7406\u6280\u672f\u7b80\u4ecb<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">8.3 Akita \u4e0e Angular<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>Akita \u662f\u4e00\u4e2a\u7b80\u5355\u800c\u6709\u6548\u7684\u72b6\u6001\u7ba1\u7406\u89e3\u51b3\u65b9\u6848\uff0c\u7279\u522b\u8bbe\u8ba1\u7528\u4e8e Angular \u5e94\u7528\u3002\u5b83\u4e0d\u4f9d\u8d56\u4e8e Redux\u3001MobX \u6216\u5176\u4ed6\u72b6\u6001\u7ba1\u7406\u5e93\uff0c\u800c\u662f\u63d0\u4f9b\u4e86\u4e00\u5957\u72ec\u7acb\u7684 API \u548c\u5de5\u5177\u3002Akita \u7684\u4e3b\u8981\u4f18\u70b9\u662f\u5176\u7b80\u5355\u6027\u548c\u7075\u6d3b\u6027\uff0c\u4f7f\u5f97\u5b83\u975e\u5e38\u9002\u7528\u4e8e\u5feb\u901f\u5f00\u53d1\u548c\u7ef4\u62a4 Angular \u5e94\u7528\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p><strong>1. \u5b89\u88c5 Akita<\/strong><\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u60a8\u9700\u8981\u5b89\u88c5 Akita\u3002<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install @datorama\/akita --save<\/code><\/p>\n\n\n\n<p><strong>2. \u521b\u5efa Akita Store \u548c Query<\/strong><\/p>\n\n\n\n<p>Akita \u4f7f\u7528 Store \u6765\u4fdd\u5b58\u72b6\u6001\uff0c\u4f7f\u7528 Query \u6765\u8bfb\u53d6\u72b6\u6001\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ stores\/todo.store.ts import { Store, StoreConfig } from '@datorama\/akita'; export interface TodoState { todos: string[]; } @StoreConfig({ name: 'todos' }) export class TodoStore extends Store&lt;TodoState&gt; { constructor() { super({ todos: [] }); } } \/\/ stores\/todo.query.ts import { Query } from '@datorama\/akita'; import { TodoStore, TodoState } from '.\/todo.store'; export class TodoQuery extends Query&lt;TodoState&gt; { constructor(protected store: TodoStore) { super(store); } }<\/code><\/p>\n\n\n\n<p><strong>3. \u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528 Akita Store \u548c Query<\/strong><\/p>\n\n\n\n<p>\u60a8\u53ef\u4ee5\u5728 Angular \u7ec4\u4ef6\u4e2d\u6ce8\u5165 Akita Store \u548c Query\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ components\/todo-list.component.ts import { Component } from '@angular\/core'; import { TodoStore } from '..\/stores\/todo.store'; import { TodoQuery } from '..\/stores\/todo.query'; @Component({ selector: 'app-todo-list', template: ` &lt;ul&gt; &lt;li *ngFor=\"let todo of todos$ | async\"&gt;{{ todo }}&lt;\/li&gt; &lt;\/ul&gt; `, }) export class TodoListComponent { todos$ = this.todoQuery.select(state =&gt; state.todos); constructor(private todoStore: TodoStore, private todoQuery: TodoQuery) {} addTodo(text: string) { const newTodos = [...this.todoQuery.getValue().todos, text]; this.todoStore.update({ todos: newTodos }); } }<\/code><\/p>\n\n\n\n<p><strong>4. \u4f7f\u7528 Akita \u7684\u5176\u4ed6\u7279\u6027<\/strong><\/p>\n\n\n\n<p>Akita \u8fd8\u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u5176\u4ed6\u7279\u6027\uff0c\u5982\u5b9e\u4f53\u7ba1\u7406\u3001\u7f13\u5b58\u3001\u63d2\u4ef6\u7b49\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ \u4f7f\u7528 Akita \u5b9e\u4f53\u7ba1\u7406 import { EntityStore, EntityState, EntityQuery } from '@datorama\/akita'; export interface Todo { id: number; text: string; } export interface TodoState extends EntityState&lt;Todo&gt; {} @StoreConfig({ name: 'todos' }) export class TodoEntityStore extends EntityStore&lt;TodoState&gt; { constructor() { super(); } } export class TodoEntityQuery extends EntityQuery&lt;TodoState&gt; { constructor(protected store: TodoEntityStore) { super(store); } }<\/code><\/p>\n\n\n\n<p>\u8fd9\u6837\uff0c\u60a8\u5c31\u5728 Angular \u5e94\u7528\u4e2d\u6210\u529f\u5730\u5e94\u7528\u4e86 Akita \u8fdb\u884c\u72b6\u6001\u7ba1\u7406\u3002Akita \u7531\u4e8e\u5176\u7b80\u5355\u6027\u548c\u7075\u6d3b\u6027\uff0c\u662f\u4e00\u4e2a\u975e\u5e38\u503c\u5f97\u8003\u8651\u7684\u72b6\u6001\u7ba1\u7406\u9009\u9879\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u516b\u7ae0\u7b2c\u4e09\u5c0f\u8282 &#8220;Akita \u4e0e Angular&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e5d\u7ae0\uff1a\u603b\u7ed3\u76849.1 \u8bfe\u7a0b\u56de\u987eChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u4e5d\u7ae0\uff1a\u603b\u7ed3<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">9.1 \u8bfe\u7a0b\u56de\u987e<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u672c\u6559\u7a0b\u4e2d\uff0c\u6211\u4eec\u6df1\u5165\u63a2\u8ba8\u4e86 Angular \u524d\u7aef\u5f00\u53d1\u4e2d\u7684\u72b6\u6001\u7ba1\u7406\u3002\u4ece\u57fa\u7840\u6982\u5ff5\u5230\u9ad8\u7ea7\u6280\u672f\uff0c\u6211\u4eec\u8986\u76d6\u4e86\u591a\u4e2a\u65b9\u9762\uff0c\u4ee5\u4fbf\u60a8\u80fd\u5168\u9762\u4e86\u89e3\u548c\u638c\u63e1\u8fd9\u4e00\u4e3b\u9898\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4e3b\u8981\u5185\u5bb9\u56de\u987e<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Angular \u72b6\u6001\u7ba1\u7406\u57fa\u7840<\/strong>: \u6211\u4eec\u4ece\u89e3\u91ca\u4ec0\u4e48\u662f\u72b6\u6001\u7ba1\u7406\u5f00\u59cb\uff0c\u8ba8\u8bba\u4e86\u4e3a\u4ec0\u4e48\u5b83\u5728\u524d\u7aef\u5f00\u53d1\u4e2d\u5982\u6b64\u91cd\u8981\u3002<\/li>\n\n\n\n<li><strong>UI \u6a21\u677f<\/strong>: \u63a2\u8ba8\u4e86\u5982\u4f55\u5728 Angular \u4e2d\u521b\u5efa UI \u6a21\u677f\uff0c\u5e76\u4e0e\u72b6\u6001\u7ba1\u7406\u7ed3\u5408\u3002<\/li>\n\n\n\n<li><strong>NgRx \u57fa\u7840<\/strong>: \u6211\u4eec\u8be6\u7ec6\u4ecb\u7ecd\u4e86 NgRx \u5e93\uff0c\u5305\u62ec Actions\u3001Reducers\u3001Effects \u548c Store \u7684\u6982\u5ff5\u3002<\/li>\n\n\n\n<li><strong>NgRx \u8fdb\u9636<\/strong>: \u5728\u57fa\u7840\u7684\u57fa\u7840\u4e0a\uff0c\u6211\u4eec\u8fdb\u4e00\u6b65\u63a2\u8ba8\u4e86\u5982\u4f55\u8fdb\u884c\u5f02\u6b65\u64cd\u4f5c\u3001\u4e0e Angular \u670d\u52a1\u96c6\u6210\u3001\u6027\u80fd\u4f18\u5316\u548c\u6d4b\u8bd5\u7b56\u7565\u3002<\/li>\n\n\n\n<li><strong>\u5b9e\u6218\u793a\u4f8b<\/strong>: \u901a\u8fc7\u4e00\u4e2a\u5f85\u529e\u4e8b\u9879\u5e94\u7528\uff0c\u6211\u4eec\u5c55\u793a\u4e86\u5982\u4f55\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u5e94\u7528 NgRx\u3002<\/li>\n\n\n\n<li><strong>\u5206\u6790\u4e0e\u4f18\u5316<\/strong>: \u6211\u4eec\u8ba8\u8bba\u4e86\u5982\u4f55\u5206\u6790\u73b0\u6709\u7684 NgRx \u5e94\u7528\u5e76\u8fdb\u884c\u4f18\u5316\u3002<\/li>\n\n\n\n<li><strong>\u5176\u4ed6\u72b6\u6001\u7ba1\u7406\u6280\u672f<\/strong>: \u6700\u540e\uff0c\u6211\u4eec\u8fd8\u7b80\u8981\u4ecb\u7ecd\u4e86\u9664 NgRx \u5916\u7684\u5176\u4ed6\u72b6\u6001\u7ba1\u7406\u6280\u672f\uff0c\u5982 Redux\u3001MobX \u548c Akita\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u603b\u7ed3<\/h4>\n\n\n\n<p>\u72b6\u6001\u7ba1\u7406\u662f\u524d\u7aef\u5f00\u53d1\u4e2d\u4e00\u4e2a\u590d\u6742\u4f46\u81f3\u5173\u91cd\u8981\u7684\u90e8\u5206\u3002\u6b63\u786e\u5730\u7ba1\u7406\u5e94\u7528\u72b6\u6001\u4e0d\u4ec5\u53ef\u4ee5\u63d0\u9ad8\u5e94\u7528\u6027\u80fd\uff0c\u8fd8\u80fd\u5927\u5927\u63d0\u9ad8\u4ee3\u7801\u7684\u53ef\u7ef4\u62a4\u6027\u548c\u53ef\u6269\u5c55\u6027\u3002\u901a\u8fc7\u672c\u6559\u7a0b\uff0c\u60a8\u5e94\u8be5\u5df2\u7ecf\u638c\u63e1\u4e86 Angular \u72b6\u6001\u7ba1\u7406\u7684\u5404\u4e2a\u65b9\u9762\uff0c\u5305\u62ec\u4f46\u4e0d\u9650\u4e8e\u4f7f\u7528 NgRx\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u4e5d\u7ae0\u7b2c\u4e00\u5c0f\u8282 &#8220;\u8bfe\u7a0b\u56de\u987e&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e5d\u7ae0\uff1a\u603b\u7ed3\u76849.2 \u4e0b\u4e00\u6b65\u5b66\u4e60\u65b9\u5411ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u4e5d\u7ae0\uff1a\u603b\u7ed3<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">9.2 \u4e0b\u4e00\u6b65\u5b66\u4e60\u65b9\u5411<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5b8c\u6210\u672c\u6559\u7a0b\u540e\uff0c\u60a8\u53ef\u80fd\u4f1a\u60f3\u77e5\u9053\u4e0b\u4e00\u6b65\u5e94\u8be5\u5982\u4f55\u7ee7\u7eed\u5b66\u4e60\u548c\u63d0\u9ad8\u3002\u5728\u8fd9\u4e00\u8282\u4e2d\uff0c\u6211\u4eec\u5c06\u63d0\u4f9b\u4e00\u4e9b\u65b9\u5411\u548c\u8d44\u6e90\uff0c\u4ee5\u5e2e\u52a9\u60a8\u66f4\u6df1\u5165\u5730\u4e86\u89e3 Angular \u548c\u72b6\u6001\u7ba1\u7406\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u63a8\u8350\u7684\u4e0b\u4e00\u6b65<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u6df1\u5165 NgRx<\/strong>: \u672c\u6559\u7a0b\u4e3b\u8981\u8986\u76d6\u4e86 NgRx \u7684\u57fa\u7840\u548c\u4e00\u4e9b\u8fdb\u9636\u4e3b\u9898\u3002\u4f46 NgRx \u8fd8\u6709\u66f4\u591a\u9ad8\u7ea7\u7279\u6027\u548c\u6700\u4f73\u5b9e\u8df5\uff0c\u503c\u5f97\u6df1\u5165\u5b66\u4e60\u3002<\/li>\n\n\n\n<li><strong>\u638c\u63e1 Angular<\/strong>: \u72b6\u6001\u7ba1\u7406\u53ea\u662f Angular \u4e30\u5bcc\u751f\u6001\u7cfb\u7edf\u7684\u4e00\u90e8\u5206\u3002\u5efa\u8bae\u60a8\u4e5f\u5b66\u4e60 Angular \u7684\u5176\u4ed6\u65b9\u9762\uff0c\u5982\u8def\u7531\u3001\u8868\u5355\u3001HTTP \u5ba2\u6237\u7aef\u7b49\u3002<\/li>\n\n\n\n<li><strong>\u5b66\u4e60\u5176\u4ed6\u72b6\u6001\u7ba1\u7406\u5e93<\/strong>: \u9664\u4e86 NgRx\uff0c\u8fd8\u6709\u5176\u4ed6\u591a\u79cd\u72b6\u6001\u7ba1\u7406\u89e3\u51b3\u65b9\u6848\u3002\u4e86\u89e3\u548c\u6bd4\u8f83\u8fd9\u4e9b\u5e93\u5c06\u6709\u52a9\u4e8e\u60a8\u9009\u62e9\u6700\u9002\u5408\u60a8\u9879\u76ee\u7684\u5de5\u5177\u3002<\/li>\n\n\n\n<li><strong>\u5b9e\u8df5\u9879\u76ee<\/strong>: \u7406\u8bba\u77e5\u8bc6\u662f\u4e0d\u591f\u7684\uff0c\u6700\u597d\u7684\u5b66\u4e60\u65b9\u5f0f\u662f\u901a\u8fc7\u5b9e\u8df5\u3002\u5c1d\u8bd5\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u5e94\u7528\u60a8\u6240\u5b66\u7684\u77e5\u8bc6\uff0c\u4e0d\u65ad\u5730\u8c03\u6574\u548c\u4f18\u5316\u3002<\/li>\n\n\n\n<li><strong>\u5173\u6ce8\u793e\u533a\u548c\u66f4\u65b0<\/strong>: Angular \u548c\u72b6\u6001\u7ba1\u7406\u5e93\u90fd\u662f\u6d3b\u8dc3\u53d1\u5c55\u7684\u3002\u5173\u6ce8\u76f8\u5173\u793e\u533a\u548c\u5b98\u65b9\u66f4\u65b0\uff0c\u4ee5\u4fbf\u53ca\u65f6\u4e86\u89e3\u6700\u65b0\u7684\u53d8\u5316\u548c\u8d8b\u52bf\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u63a8\u8350\u8d44\u6e90<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u5b98\u65b9\u6587\u6863<\/strong>: Angular \u548c NgRx \u7684\u5b98\u65b9\u6587\u6863\u662f\u6700\u6743\u5a01\u3001\u6700\u5168\u9762\u7684\u8d44\u6e90\u3002<\/li>\n\n\n\n<li><strong>\u5728\u7ebf\u8bfe\u7a0b\u548c\u6559\u7a0b<\/strong>: \u7f51\u7ad9\u5982 Udemy\u3001Pluralsight \u548c YouTube \u63d0\u4f9b\u4e86\u5927\u91cf\u9ad8\u8d28\u91cf\u7684\u89c6\u9891\u6559\u7a0b\u3002<\/li>\n\n\n\n<li><strong>\u793e\u533a\u548c\u8bba\u575b<\/strong>: Stack Overflow\u3001Reddit \u548c\u5404\u79cd\u6280\u672f\u535a\u5ba2\u662f\u83b7\u53d6\u4fe1\u606f\u548c\u89e3\u51b3\u95ee\u9898\u7684\u597d\u5730\u65b9\u3002<\/li>\n\n\n\n<li><strong>\u5f00\u6e90\u9879\u76ee<\/strong>: GitHub \u4e0a\u6709\u5927\u91cf\u4e0e Angular \u548c\u72b6\u6001\u7ba1\u7406\u76f8\u5173\u7684\u5f00\u6e90\u9879\u76ee\uff0c\u901a\u8fc7\u9605\u8bfb\u548c\u8d21\u732e\u4ee3\u7801\uff0c\u60a8\u53ef\u4ee5\u83b7\u5f97\u5b9d\u8d35\u7684\u5b9e\u8df5\u7ecf\u9a8c\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u4e5d\u7ae0\u7b2c\u4e8c\u5c0f\u8282 &#8220;\u4e0b\u4e00\u6b65\u5b66\u4e60\u65b9\u5411&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5e0c\u671b\u8fd9\u4e9b\u5efa\u8bae\u548c\u8d44\u6e90\u80fd\u5e2e\u52a9\u60a8\u5728 Angular \u548c\u72b6\u6001\u7ba1\u7406\u65b9\u9762\u53d6\u5f97\u66f4\u8fdb\u4e00\u6b65\u7684\u6210\u5c31\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u5341\u7ae0\uff1a\u53c2\u8003\u8d44\u6599\u4e0e\u8fdb\u4e00\u6b65\u5b66\u4e60\u768410.1 \u6587\u6863\u4e0e\u6559\u7a0bChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u5341\u7ae0\uff1a\u53c2\u8003\u8d44\u6599\u4e0e\u8fdb\u4e00\u6b65\u5b66\u4e60<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">10.1 \u6587\u6863\u4e0e\u6559\u7a0b<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u60a8\u7684\u5b66\u4e60\u65c5\u7a0b\u4e2d\uff0c\u9ad8\u8d28\u91cf\u7684\u6587\u6863\u548c\u6559\u7a0b\u662f\u4e0d\u53ef\u6216\u7f3a\u7684\u8d44\u6e90\u3002\u8fd9\u4e9b\u8d44\u6599\u4e0d\u4ec5\u53ef\u4ee5\u63d0\u4f9b\u8be6\u7ec6\u7684\u6307\u5bfc\uff0c\u8fd8\u80fd\u5e2e\u52a9\u60a8\u89e3\u51b3\u7279\u5b9a\u95ee\u9898\uff0c\u751a\u81f3\u6fc0\u53d1\u60a8\u7684\u521b\u65b0\u601d\u7ef4\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u63a8\u8350\u7684\u6587\u6863\u4e0e\u6559\u7a0b<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Angular \u5b98\u65b9\u6587\u6863<\/strong>: \u8fd9\u662f\u5b66\u4e60 Angular \u6700\u6743\u5a01\u7684\u8d44\u6e90\uff0c\u6db5\u76d6\u4e86\u4ece\u57fa\u7840\u5230\u9ad8\u7ea7\u7684\u6240\u6709\u4e3b\u9898\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/angular.io\/docs\">Angular \u5b98\u65b9\u6587\u6863<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>NgRx \u5b98\u65b9\u6587\u6863<\/strong>: \u5982\u679c\u60a8\u5bf9 NgRx \u611f\u5174\u8da3\uff0c\u5176\u5b98\u65b9\u6587\u6863\u662f\u6700\u4f73\u7684\u5b66\u4e60\u8d44\u6599\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/ngrx.io\/guide\/store\">NgRx \u5b98\u65b9\u6587\u6863<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>MDN Web \u6587\u6863<\/strong>: \u5bf9\u4e8e\u524d\u7aef\u5f00\u53d1\u7684\u57fa\u7840\u77e5\u8bc6\uff0c\u5982 HTML\u3001CSS \u548c JavaScript\uff0cMDN \u662f\u4e00\u4e2a\u975e\u5e38\u5168\u9762\u548c\u53ef\u9760\u7684\u8d44\u6e90\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/\">MDN Web \u6587\u6863<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Udemy<\/strong>: \u8fd9\u4e2a\u5e73\u53f0\u63d0\u4f9b\u4e86\u5927\u91cf\u7684 Angular \u548c\u72b6\u6001\u7ba1\u7406\u76f8\u5173\u7684\u5728\u7ebf\u8bfe\u7a0b\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.udemy.com\/topic\/angular\/\">Udemy Angular \u8bfe\u7a0b<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>YouTube<\/strong>: \u6709\u5f88\u591a\u4f18\u79c0\u7684\u5f00\u53d1\u8005\u548c\u6559\u80b2\u8005\u5728 YouTube \u4e0a\u53d1\u5e03\u514d\u8d39\u7684\u6559\u7a0b\u548c\u8bb2\u5ea7\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.youtube.com\/c\/Academind\">Academind<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/c\/TraversyMedia\">Traversy Media<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Stack Overflow<\/strong>: \u5f53\u60a8\u9047\u5230\u5177\u4f53\u95ee\u9898\u65f6\uff0cStack Overflow \u662f\u4e00\u4e2a\u5f88\u597d\u7684\u6c42\u52a9\u5e73\u53f0\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/tagged\/angular\">Stack Overflow Angular \u6807\u7b7e<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Medium \u548c Dev.to<\/strong>: \u8fd9\u4e24\u4e2a\u5e73\u53f0\u4e0a\u6709\u5927\u91cf\u7684\u6280\u672f\u6587\u7ae0\uff0c\u6db5\u76d6\u4e86\u5404\u79cd\u4e3b\u9898\u548c\u95ee\u9898\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/medium.com\/\">Medium<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dev.to\/\">Dev.to<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>GitHub<\/strong>: \u8bb8\u591a\u5f00\u6e90\u9879\u76ee\u548c\u4ee3\u7801\u793a\u4f8b\u90fd\u6258\u7ba1\u5728 GitHub \u4e0a\uff0c\u8fd9\u662f\u4e00\u4e2a\u4e86\u89e3\u5b9e\u9645\u5e94\u7528\u548c\u6700\u4f73\u5b9e\u8df5\u7684\u597d\u5730\u65b9\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/PatrickJS\/awesome-angular\">Awesome Angular<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u8fd9\u4e9b\u6587\u6863\u548c\u6559\u7a0b\u5c06\u4e3a\u60a8\u63d0\u4f9b\u5b9d\u8d35\u7684\u77e5\u8bc6\u548c\u5b9e\u8df5\u7ecf\u9a8c\uff0c\u5e2e\u52a9\u60a8\u66f4\u6709\u6548\u5730\u5b66\u4e60 Angular \u548c\u72b6\u6001\u7ba1\u7406\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u5341\u7ae0\u7b2c\u4e00\u5c0f\u8282 &#8220;\u6587\u6863\u4e0e\u6559\u7a0b&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u5341\u7ae0\uff1a\u53c2\u8003\u8d44\u6599\u4e0e\u8fdb\u4e00\u6b65\u5b66\u4e60\u768410.2 \u5728\u7ebf\u8bfe\u7a0bChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u5341\u7ae0\uff1a\u53c2\u8003\u8d44\u6599\u4e0e\u8fdb\u4e00\u6b65\u5b66\u4e60<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">10.2 \u5728\u7ebf\u8bfe\u7a0b<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u7ebf\u8bfe\u7a0b\u662f\u4e00\u79cd\u975e\u5e38\u6709\u6548\u7684\u5b66\u4e60\u65b9\u5f0f\uff0c\u5b83\u4eec\u901a\u5e38\u7531\u4e13\u4e1a\u7684\u6559\u80b2\u8005\u6216\u884c\u4e1a\u4e13\u5bb6\u8bbe\u8ba1\u548c\u6559\u6388\u3002\u8fd9\u4e9b\u8bfe\u7a0b\u901a\u5e38\u5305\u62ec\u89c6\u9891\u8bb2\u5ea7\u3001\u5b9e\u9a8c\u3001\u4f5c\u4e1a\u548c\u9879\u76ee\uff0c\u4ee5\u5e2e\u52a9\u60a8\u5168\u9762\u638c\u63e1\u4e3b\u9898\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u63a8\u8350\u7684\u5728\u7ebf\u8bfe\u7a0b<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Udemy<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Angular &#8211; The Complete Guide<\/strong>: \u8fd9\u662f Udemy \u4e0a\u6700\u53d7\u6b22\u8fce\u7684 Angular \u8bfe\u7a0b\u4e4b\u4e00\uff0c\u7531 Maximilian Schwarzm\u00fcller \u4e3b\u8bb2\u3002<\/li>\n\n\n\n<li><strong>NgRx (Angular) &#8211; The Complete Guide<\/strong>: \u5982\u679c\u60a8\u60f3\u4e13\u95e8\u6df1\u5165\u5b66\u4e60 NgRx\uff0c\u8fd9\u95e8\u8bfe\u7a0b\u662f\u4e00\u4e2a\u5f88\u597d\u7684\u9009\u62e9\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Pluralsight<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Angular Fundamentals<\/strong>: \u8fd9\u95e8\u8bfe\u7a0b\u9002\u7528\u4e8e Angular \u521d\u5b66\u8005\uff0c\u6db5\u76d6\u4e86\u57fa\u7840\u77e5\u8bc6\u3002<\/li>\n\n\n\n<li><strong>Advanced Angular<\/strong>: \u5982\u679c\u60a8\u5df2\u7ecf\u719f\u6089 Angular \u7684\u57fa\u7840\uff0c\u8fd9\u95e8\u8bfe\u7a0b\u5c06\u5e2e\u52a9\u60a8\u638c\u63e1\u66f4\u9ad8\u7ea7\u7684\u4e3b\u9898\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Coursera<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Single Page Web Applications with AngularJS<\/strong>: \u8fd9\u662f\u7531 Johns Hopkins University \u63d0\u4f9b\u7684\u4e00\u95e8\u514d\u8d39\u8bfe\u7a0b\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>edX<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Angular for Beginners<\/strong>: \u8fd9\u662f\u4e00\u95e8\u7531 Microsoft \u63d0\u4f9b\u7684\u514d\u8d39\u8bfe\u7a0b\uff0c\u9002\u7528\u4e8e\u521d\u5b66\u8005\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Codecademy<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Learn AngularJS<\/strong>: \u8fd9\u662f\u4e00\u95e8\u9002\u7528\u4e8e\u521d\u5b66\u8005\u7684\u514d\u8d39\u8bfe\u7a0b\uff0c\u6db5\u76d6\u4e86 AngularJS \u7684\u57fa\u7840\u77e5\u8bc6\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Frontend Masters<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Complete Intro to Angular<\/strong>: \u8fd9\u95e8\u8bfe\u7a0b\u7531 Angular \u56e2\u961f\u6210\u5458\u4e3b\u8bb2\uff0c\u5185\u5bb9\u975e\u5e38\u5168\u9762\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>LinkedIn Learning<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Angular Essential Training<\/strong>: \u8fd9\u95e8\u8bfe\u7a0b\u9002\u7528\u4e8e\u6240\u6709\u7ea7\u522b\u7684\u5f00\u53d1\u8005\uff0c\u5305\u62ec\u4e86\u4ece\u57fa\u7840\u5230\u9ad8\u7ea7\u7684\u591a\u4e2a\u4e3b\u9898\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>YouTube Channels<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u9664\u4e86\u4ed8\u8d39\u8bfe\u7a0b\u5916\uff0cYouTube \u4e0a\u4e5f\u6709\u5927\u91cf\u7684\u514d\u8d39 Angular \u6559\u7a0b\uff0c\u4f8b\u5982 Academind \u548c Traversy Media\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u8fd9\u4e9b\u5728\u7ebf\u8bfe\u7a0b\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u5b66\u4e60\u6750\u6599\u548c\u5b9e\u8df5\u673a\u4f1a\uff0c\u65e0\u8bba\u60a8\u662f\u521d\u5b66\u8005\u8fd8\u662f\u6709\u7ecf\u9a8c\u7684\u5f00\u53d1\u8005\uff0c\u90fd\u80fd\u4ece\u4e2d\u53d7\u76ca\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u5341\u7ae0\u7b2c\u4e8c\u5c0f\u8282 &#8220;\u5728\u7ebf\u8bfe\u7a0b&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u5341\u7ae0\uff1a\u53c2\u8003\u8d44\u6599\u4e0e\u8fdb\u4e00\u6b65\u5b66\u4e60\u768410.3 \u793e\u7fa4\u4e0e\u8bba\u575bChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u5341\u7ae0\uff1a\u53c2\u8003\u8d44\u6599\u4e0e\u8fdb\u4e00\u6b65\u5b66\u4e60<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">10.3 \u793e\u7fa4\u4e0e\u8bba\u575b<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u793e\u7fa4\u548c\u8bba\u575b\u662f\u5b66\u4e60\u548c\u6210\u957f\u7684\u91cd\u8981\u5e73\u53f0\u3002\u901a\u8fc7\u53c2\u4e0e\u8fd9\u4e9b\u793e\u7fa4\uff0c\u60a8\u53ef\u4ee5\u4e0e\u540c\u884c\u4ea4\u6d41\uff0c\u89e3\u51b3\u95ee\u9898\uff0c\u751a\u81f3\u4e0e\u4e1a\u754c\u4e13\u5bb6\u8fdb\u884c\u4e92\u52a8\u3002\u8fd9\u4e9b\u5e73\u53f0\u4e5f\u662f\u83b7\u53d6\u6700\u65b0\u4fe1\u606f\u548c\u8d8b\u52bf\u7684\u597d\u5730\u65b9\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u63a8\u8350\u7684\u793e\u7fa4\u4e0e\u8bba\u575b<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Stack Overflow<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u8fd9\u662f\u5f00\u53d1\u8005\u6700\u5e38\u7528\u7684\u95ee\u7b54\u5e73\u53f0\u3002\u60a8\u53ef\u4ee5\u5728\u8fd9\u91cc\u627e\u5230\u5927\u91cf\u5173\u4e8e Angular \u548c\u72b6\u6001\u7ba1\u7406\u7684\u95ee\u9898\u548c\u89e3\u7b54\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/tagged\/angular\">Stack Overflow Angular \u6807\u7b7e<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Reddit<\/strong>\n<ul class=\"wp-block-list\">\n<li>r\/Angular2 \u548c r\/javascript \u662f\u4e24\u4e2a\u975e\u5e38\u6d3b\u8dc3\u7684 Angular \u548c JavaScript \u76f8\u5173\u7684\u5b50\u8bba\u575b\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/www.reddit.com\/r\/Angular2\/\">r\/Angular2<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.reddit.com\/r\/javascript\/\">r\/javascript<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>GitHub<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u8bb8\u591a Angular \u548c\u72b6\u6001\u7ba1\u7406\u76f8\u5173\u7684\u5f00\u6e90\u9879\u76ee\u90fd\u5728 GitHub \u4e0a\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7\u53c2\u4e0e\u8fd9\u4e9b\u9879\u76ee\u6765\u83b7\u5f97\u5b9e\u8df5\u7ecf\u9a8c\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/PatrickJS\/awesome-angular\">Awesome Angular<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Discord \u548c Slack \u793e\u7fa4<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u8fd9\u4e9b\u5373\u65f6\u901a\u8baf\u5e73\u53f0\u4e0a\u6709\u4e13\u95e8\u7684 Angular \u548c\u524d\u7aef\u5f00\u53d1\u76f8\u5173\u7684\u793e\u7fa4\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/discord.com\/invite\/angular\">Angular Discord<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/angularbuddies.slack.com\/\">r\/Angular2 Slack<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Medium \u548c Dev.to<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u8fd9\u4e24\u4e2a\u5e73\u53f0\u4e0a\u6709\u5927\u91cf\u7684\u6280\u672f\u6587\u7ae0\uff0c\u60a8\u53ef\u4ee5\u5173\u6ce8\u4e00\u4e9b\u4e13\u95e8\u5199 Angular \u548c\u72b6\u6001\u7ba1\u7406\u7684\u4f5c\u8005\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/medium.com\/\">Medium<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dev.to\/\">Dev.to<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Twitter<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u8bb8\u591a Angular \u5f00\u53d1\u8005\u548c\u793e\u7fa4\u5728 Twitter \u4e0a\u975e\u5e38\u6d3b\u8dc3\u3002\u901a\u8fc7\u5173\u6ce8\u4ed6\u4eec\uff0c\u60a8\u53ef\u4ee5\u83b7\u5f97\u6700\u65b0\u7684\u4fe1\u606f\u548c\u8d44\u6e90\u3002<\/li>\n\n\n\n<li>\u63a8\u8350\u5173\u6ce8\uff1a<a href=\"https:\/\/twitter.com\/angular\">@angular<\/a>, <a href=\"https:\/\/twitter.com\/ngrx_io\">@ngrx_io<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Local Meetups \u548c Conferences<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u53c2\u52a0\u5f53\u5730\u7684\u6280\u672f\u805a\u4f1a\u548c\u5927\u4f1a\u662f\u4e00\u4e2a\u5f88\u597d\u7684\u7f51\u7edc\u548c\u5b66\u4e60\u673a\u4f1a\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/www.meetup.com\/\">Meetup.com<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u8fd9\u4e9b\u793e\u7fa4\u548c\u8bba\u575b\u4e0d\u4ec5\u80fd\u5e2e\u52a9\u60a8\u89e3\u51b3\u95ee\u9898\uff0c\u8fd8\u80fd\u63d0\u4f9b\u804c\u4e1a\u53d1\u5c55\u548c\u5b66\u4e60\u7684\u673a\u4f1a\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u5bf9\u7b2c\u5341\u7ae0\u7b2c\u4e09\u5c0f\u8282 &#8220;\u793e\u7fa4\u4e0e\u8bba\u575b&#8221; \u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u4fe1\u606f\uff0c\u8bf7\u968f\u65f6\u63d0\u51fa\u3002\u8c22\u8c22\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular\u524d\u7aef\u5f00\u53d1\u72b6\u6001\u7ba1\u7406\u6559\u7a0b\u5927\u7eb2  &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-3012","post","type-post","status-publish","format-standard","hentry","category-material"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/3012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3012"}],"version-history":[{"count":1,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/3012\/revisions"}],"predecessor-version":[{"id":3013,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/3012\/revisions\/3013"}],"wp:attachment":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}