结合使用 Redux 和 Angular（5）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-11-18 20:04 | 只看该作者

结合使用 Redux 和 Angular（5）

历史组件使用 stateHistory 对象配置它的滑块。像 reducer、操作和存储一样，stateHistory 对象与应用程序的 React 版本相同。请参阅 “ ” 了解 stateHistory 对象的实现。
Books 组件如清单 12 所示。
清单 12. Books 组件 (app/components/books.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
44
45
46
47
48
49
50
51

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/core';
import store from '../../store';
import Book from './book.component';

@Component({
  selector: 'books',
  template: `
<div *ngIf='status === "Fetching..."'
   style='width: 100%; padding: 20px; text-align: center'>
   <img src="../images/spinner.gif" role="presentation" />
</div>

<div *ngIf='displayMode === "LIST"' style='width: 100%; padding: 20px;'>
   <ul>
      <li *ngFor='let book of books'>
      <book [item]='book'
            [displayMode]='displayMode'></book>
      </li>
   </ul>
</div>

<div *ngIf='displayMode === "THUMBNAIL"' style='padding: 20px;'>
   <book *ngFor='let book of books'
      [item]='book'
      [displayMode]='displayMode'>
   </book>
</div>
  `
})

export default class Books {
  private books: Array<Book>;
  private displayMode: string;
  private status: string;
  private unsubscribe: any;

  constructor() {
this.unsubscribe = store.subscribe(() => {
   const state = store.getState();

   this.books = state.books;
   this.displayMode = state.displayMode;
   this.status = state.currentStatus;
});
  }

  ngOnDestroy() {
this.unsubscribe();
  }
}

如果应用程序的当前状态为 Fetching...，Books 组件将显示一个下拉列表部件。该组件也会迭代图书列表，创建 book 元素。Books 组件通过订阅 Redux 存储来同步其表示状态的属性。
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 组件指定，如清单 12 所示。
最后一个组件是 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 版本现在已完成。

收藏分享评分

回复引用

订阅 TOP

返回列表