结合使用 Redux 和 Angular（4）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

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

结合使用 Redux 和 Angular（4）

[(ngModel)] 结构是 Angular 的特殊的双向绑定语法。在这个示例中，Angular 将文本字段中的值传递给组件的       topic 属性，它还将对属性的更改传递回文本字段。
Redux 的 Angular 2 绑定回想一下，我最开始是通过向 Redux 存储订阅 React 组件来实现应用程序的 React 版本的。随后，我使用了 react-redux       绑定来将组件拆分为容器和包含的组件。也可以通过  ，对 Redux 和 Angular 采用同样的方法，ng2-redux 的使用不属于本文的讨论范围。

从 Redux 角度讲，  的最有趣之处在于，事实上该组件将会订阅 Redux 存储。当存储更改时，该组件会更新它的       topic 属性。您会看到，图书搜索应用程序中的所有 Angular 组件均以一种类似方式订阅 Redux 存储。
显示模式组件如清单 9 所示。
清单 9. DisplayMode 组件       (app/components/displayMode.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

import { Component } from '@angular/core';
import store from '../../store';
import { setDisplayMode } from '../../actions';

@Component({
  selector: 'display-mode',
  template: `
<span>
   <label for='thumbnailRadio'>Thumbnail</label>

   <input id="thumbnailRadio" style="cursor: pointer"
      type="radio"
      name="display_mode"
      value="Thumbnail"
      [checked]='displayMode === "THUMBNAIL"'
      (change)="setMode('THUMBNAIL')"/>

   <label for='listRadio'>List</label>

   <input id="listRadio" style="cursor: pointer"
      type="radio"
      name="display_mode"
      value="List"
      [checked]='displayMode === "LIST"'
      (change)="setMode('LIST')"/>
</span>
`
})

export default class DisplayMode {
  private displayMode: string;
  private unsubscribe: any;

  constructor() {
this.unsubscribe = store.subscribe(() => {
   this.displayMode = store.getState().displayMode;
});
  }

  setMode(value) {
store.dispatch(setDisplayMode(value));
  }

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

显示模式组件类似于状态查看器。两个组件都将输入事件映射到组件方法。两个组件都订阅 Redux 存储，以便在应用程序状态发生更改时更新一个属性。区别在于显示模式组件有两个输入，它们都是单选按钮。这些单选按钮链接到应用程序的状态中存储的显示模式值。
历史组件的代码很长，所以我将它分为两个清单。该组件的模板如清单 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 属性。

收藏分享评分

回复引用

订阅 TOP

返回列表