9月リンク集

これは何か

• 9月に調べたことのメモ。基本形式は、「参考URLとそれに関するメモとコメント」。
• Angular関連がほとんど。

NgRx, アプリケーションの状態管理

A Comprehensive Introduction to @ngrx/store - Companion to Egghead.io Series

• 単純化したngrxの実装をしながら、Rxの機能、Reduxの考えかた、Rxによる実装方法がわかる
• Action -> Reducer -> Stateの流れ、Storeの実装方法、Reducerの合成、ミドルウェアなど
• BehaviorSubject, scan, let, distinctUntilChanged,combineLatest, withLatestFromなど
• Storeからデータを所得する方法、Store（State）のデータと表示用のデータをどう分けて管理するか #ngrx #angular · GitHub
  • 個別のselectで取得, combineLatestでまとめる, projection functionを抽出して別ファイルor関数をつくる

// combine multiple state slices
Observable.combineLatest(
  store.select('people'),
  store.select('events'),
  (people, events) => {
    // projection here
})

Using NgRx 4 to Manage State in Angular Applications

• NgRxを使った状態管理について
• アプリケーションのStateを以下6種類に分けて考える
  • Server state
  • Persistent state
  • The URL and router state
  • Client state
  • Transient client state
  • Local UI state
• Using NgRx 4 to Manage State in Angular Applicationsのメモ #angular #rx #ngrx #redux · GitHub
  • 日本語メモ

NgRx: Patterns and Techniques – nrwl

• アクションを3種類に分ける
  • コマンド、ドキュメント、イベント
• エフェクト
  • アクションの決定、アクションの変形、サイドエフェクト
  • Reducerがやらないこと全てをおこなう
• NgRx: Patterns and Techniquesのメモ #angular #ngrx #redux #rx · GitHub
  • 日本語メモ

platform/README.md at master · ngrx/platform · GitHub

• From Inactive to Reactive with ngrx Brandon Roberts & Mike Ryan - YouTube
  • この動画 -> 公式のExampleアプリという順でみると理解しやすい
• https://github.com/ngrx/platform/blob/master/docs/store/README.md
  • StoreからStateにアクセス
  • StoreはStateのObservableでありActionのObserver
    • Actionを受け取り、Stateを返す
  • Reducer
    • export interface ActionReducer<T, V extends Action = Action> { (state: T | undefined, action: V): T; }
• https://github.com/ngrx/platform/blob/master/docs/effects/README.md
  • Controlling Effects
    • （メモ）
• https://github.com/ngrx/platform/blob/master/docs/router-store/README.md
  • どのタイミングでアクションをDispatchしているのか
    • https://github.com/ngrx/platform/blob/0528d2ddea5a0a772d7130f7296984e82369961a/modules/router-store/src/router_store_module.ts#L176
      • (<any>this.router).hooks.beforePreactivation
    • https://github.com/ngrx/platform/blob/0528d2ddea5a0a772d7130f7296984e82369961a/modules/router-store/src/router_store_module.ts#L216
      • this.router.events.subscribeを利用
      • こっちは想像通り

Rx関連

Rxのオペレータメモ #rx · GitHub

• 自分用のメモ

mergeMapとswitchMap

• RxJSのconcatMap, mergeMap, switchMapの違いを理解する(中級者向け) - Qiita
• rxjs - SwitchMap vs MergeMap in the #ngrx example - Stack Overflow

  • with the switchMap you can cancel the previous network request if it's running?

• 配列を返すことも可能
  • angular - RxJS/Observable flatMap can return Observable or array - Stack Overflow
  • ObservableInput

RxJS を学ぼう #2 – よく使う ( と思う ) オペレータ15選 – NET BIZ DIV. TECH BLOG

Angular関連

angular - @HostBinding and @HostListener: what do they do and what are they for? - Stack Overflow

• @HostBindingと@HostListenerのシンプルな利用例

コンポーネントを動的に表示

• Dynamically add components to the DOM with Angular – Frontend Weekly – Medium
  • @ViewChild('dynamic', { read: ViewContainerRef }) viewContainerRef: ViewContainerRef
  • readの存在知らなかった
• NgComponentOutlet
  • 別の方法
  • 表示するだけならこっちの方がシンプルに実装できる
  • NgTemplateOutletもある
• angular - What are projectable nodes in angular2 - Stack Overflow
  • createComponentの引数であるprojectableNodesについて
• angular4 forms - Load Dynamic templates within a single component using Angular 4 - Stack Overflow
  • まだしっかりみてない
  • ng-templateを取得するためにGetTemplateDirectiveというDirectiveをつくる

Change Detectionについて

• 日本語訳：Angular 2 Change Detection Explained - Qiita
  • わかりやすい。ありがたい
  • イベント、XHR、タイマー
• Change And Its Detection In JavaScript Frameworks
  • Angularに限らない話
• markForCheckとdetectChanges の違いはわかるがどっちを使うべきかの説明がまだしっくりきていない
  • ルートからChange Detectionをはじめる
• Everything you need to know about change detection in Angular

  • Its content is based on the newest Angular version — 4.0.1. The way how change detection mechanism is implemented under the hood in this version is different from the earlier 2.4.1.

私がMVCフレームワークをもはや使わない理由

Running Protractor tests on Webdriver 2.47.1 gets - Error: Server terminated early with status 1 · Issue #2638 · angular/protractor · GitHub

• Macを買い換えたらE2Eのテストがこけてしまった
  • 原因はJavaのバージョン
    • export JAVA_HOME="/Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home"

RouteReuseStrategy

• 実際にはこのような使い方をしていないがメモとして

/**
 * コンポーネントの再描画のルールを変更
 * https://medium.com/@juliapassynkova/angular-2-component-reuse-strategy-9f3ddfab23f5
 */
export class CustomRouteReuseStrategy implements RouteReuseStrategy {

  // copy from DefaultRouteReuseStrategy
  shouldDetach(route) { return false; }
  store(route, detachedTree) { }
  shouldAttach(route) { return false; }
  retrieve(route) { return null; }

  // override
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return this._shouldReuseRoute(future, curr) && this.isUnChanged(future, curr);
  }
  private _shouldReuseRoute(future, curr) {
    return future.routeConfig === curr.routeConfig;
  }

  /**
   * 追加ルール
   * 特定コンポーネントかつ、`key`が変更した時
   */
  private isUnChanged(future, curr) {
    const name = future.component && (<any>future.component).name;
    if (name === 'BarComponent') {
      if (future.paramMap.get('key') && curr.paramMap.get('key') && future.paramMap.get('key') !== curr.paramMap.get('key')) {
        return false;
      }
    }
    return true;
  }
}

テスト

selenium - Debugging “Element is not clickable at point” error - Stack Overflow