结合使用 Redux 和 Angular-5

look_w

Book 组件如清单 13 所示。
清单 13. Book 组件          (app/components/book.component.ts)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

import { Component, Input } from '@angular/core'; import store from '../../store'; @Component({   selector: 'book',   template: `     <span *ngIf='displayMode === "THUMBNAIL"' style='padding: 10px'>       <a href={{item.volumeInfo.canonicalVolumeLink}}>         <img src={{item.volumeInfo.imageLinks.thumbnail}}/>       </a>     </span>     <span *ngIf='displayMode === "LIST"'>       <a href={{item.volumeInfo.canonicalVolumeLink}}>         {{item.volumeInfo.title}}       </a>     </span>   ` }) export default class Book {   @Input() item: any;   @Input() displayMode: string; }

Book 组件的标记将图书呈现为文本链接或缩略图。该组件的 TypeScript 声明了两个输入属性：item 和          displayMode。这些属性的值由 Books 组件指定，如         所示。
最后一个组件是 StateViewer，如清单 14 所示。
清单 14. StateViewer 组件          (app/components/stateviewer.component.ts)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

import { Component } from '@angular/core'; import store from '../../store'; import stateHistory from '../../statehistory'; @Component({   selector: 'state-viewer',   template: `   <hr/>   <span style='font-style: tahoma; font-size: 1.5em'>     Application State   </span>   <div style='padding-top: 10px'>     Topic: {{state.topic}}<br />     Display mode: {{state.displayMode}}<br />     Books displayed:   {{ state.books.length }}<br />     Actions processed: {{ stateHistory.past.length +                           stateHistory.future.length + 1 }}<br />     Current action:    {{ stateHistory.past.length + 1 }}   </div>   ` }) export default class StateViewer {   private state: any;   private stateHistory: any;   private unsubscribe: any;   constructor(   ){     this.state = store.getState();     this.stateHistory = stateHistory;     this.unsubscribe = store.subscribe(() => {       this.state = store.getState();     });   }   ngOnDestroy() {     this.unsubscribe();   } }

StateViewer 组件使用应用程序状态和状态历史来显示当前状态。
图书搜索应用程序的 Angular 版本现在已完成。
Redux DevTools图书搜索应用程序的一些功能（用于在应用程序以前的状态中移动的历史滑块和箭头按钮，以及当前状态的显示视图）不是图书搜索所独有的。您可以提取这些特性的代码，将它们用在其他应用程序中。您可能会怀疑，某人（Redux        的实现者）通过实现         完成了类似的工作。
图 3 显示了 ，该扩展是在 Redux DevTools 上构建的。
图 3. Redux DevTools Chrome 扩展
图 3 显示了日志监视器窗格，默认情况下，它显示了状态历史，还提供了一个滑块和箭头按钮。目前为止，您应该已经很好地理解了这些特性是如何实现的。
图 4 显示了 Chart 窗格，它提供了应用程序状态的图形表示。将鼠标悬停在状态中的单个数据上时，就可以在一个弹出窗口中看到该数据的表示，在图 4 中也可以看到该数据表示。
图 4. 使用 Redux DevTools Chrome 扩展了解状态