结合使用 Redux 和 Angular-4

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-1-20 22:05 | 只看该作者

结合使用 Redux 和 Angular-4

历史组件的代码很长，所以我将它分为两个清单。该组件的模板如清单 10 所示。
清单 10. History 组件的模板 (app/components/history.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

import { Component } from '@angular/core';

@Component({
  selector: 'history',
  template: `
  <input type='range' #range
style='cursor: pointer'
min={1}
(input)='setState(range.value)'
[max]='maximum'
[value]='value'/>

  <a href='#' style='text-decoration: none'
(click)='previousState()'
[innerHTML] = 'leftArrow'>
  </a>

  <a href='#' style='text-decoration: none'
(click)='nextState()'
[innerHTML] = 'rightArrow'>
  </a>
  `
})

历史组件包含滑块和箭头按钮，它们控制应用程序的当前状态。同样地，模板标记将事件（确切地讲，是 click 和 input 事件）映射到组件方法。这些方法如清单 11 所示，其中包含历史组件的 TypeScript。
清单 11. History 组件的 TypeScript (app/components/history.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
52
53

import { gotoState, redo, undo } from '../../actions';
import stateHistory from '../../statehistory';
import store from '../../store';

export default class History {
  private leftArrow: string;
  private rightArrow: string;
  private stateHistory: any;
  private topic: string;
  private unsubscribe: any;
  private value: number;
  private maximum: number;

  constructor() {
this.leftArrow = '←';
this.rightArrow = '→';

this.stateHistory = stateHistory;

this.unsubscribe = store.subscribe(() => {
   this.topic = store.getState().topic;
   this.maximum = this.max();
   this.value = this.val();
});
  }

  setState(stateIndex) {
store.dispatch(gotoState(stateIndex));
  }

  previousState() {
store.dispatch(undo());
  }

  nextState() {
store.dispatch(redo());
  }

  val() {
return this.stateHistory.past ? this.stateHistory.past.length : 0;
  }

  max() {
return (this.stateHistory.past ? this.stateHistory.past.length : 0) +
         (this.stateHistory.present ? 1 : 0)          +
         (this.stateHistory.future  ? this.stateHistory.future.length : 0) - 1;
  }

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

像我目前讨论的其他 Angular 组件一样，历史组件将会订阅 Redux 存储，并在状态更改时更新其 topic、maximum       和 value 属性。
历史组件使用 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 存储来同步其表示状态的属性。

收藏分享评分

回复引用

订阅 TOP

返回列表