reduxストアのアイテムをangular5アプリに表示するにはどうすればいいですか？

Question

は私がreduxstoreとフックアップしようとしていますangular5コンポーネントを持って、それは次のようになります。

import { Component } from '@angular/core'; 
import { NgRedux, select, DevToolsExtension } from '@angular-redux/store'; 
import { TodoActions } from './actions'; 
import { AppState, INITIAL_STATE, rootReducer } from './store'; 
import {Observable} from "rxjs/Observable"; 

@Component({ 
    selector: 'app-root', 
    template: `  
    <input type="text" #edit /> 
    <button (click)="actions.add({data:edit,action:'ADD'})">add</button> 
    <p>The list is:</p> 
    <ul> 
     <li *ngFor="let item of (items | async)"> 
     {{item}} 
     </li> 
    </ul> 
    `, 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 
    @select() readonly items$: Observable<string[]>; 

    constructor(
    ngRedux: NgRedux<AppState>, 
    devTools: DevToolsExtension, 
    private actions: TodoActions) { 

    ngRedux.configureStore(
     rootReducer, 
     INITIAL_STATE, 
     null, 
     devTools.isEnabled() ? [ devTools.enhancer() ] : []); 
    } 
} 

問題は、私は、リスト内の項目を表示することができないということです。ここにルートレデューサーがあります：

import {Action} from 'redux'; 
import {TodoActions} from './actions'; 

export interface AppState { 
    items: string[]; 
} 
export const INITIAL_STATE: AppState = {items: []}; 

export function rootReducer(state: AppState, action: Action): AppState { 
    switch (action.type) { 
    case TodoActions.ADD: 
     var newstate = state; 
     newstate.items.push(action.data.data.value); 
     return newstate; 
    } 
    ; 

default: 
    return state; 
} 
} 

どのように項目を表示できますか？最初のアイテムがredux-consoleから状態に追加されるように見えます。ここではこれはかなり右を見ていないにもgithublink

Answer 1

です：

var newstate = state; 
    newstate.items.push(action.data.data.value); 
    return newstate; 

あなたが実際に新しい配列またはコピーを作成していない：newstateとstateの両方が同じ配列なので、あなたがしていますおそらく戻ったほうが良い新しい配列浅いクローニング：

export function rootReducer(state: AppState, action): AppState { 
    switch (action.type) { 
    case TodoActions.ADD: 
     return { 
     ...state, 
     items: [ 
      ...state.items, 
      action.data.value 
     ] 
     } 

    default: 
     return state; 
    } 
} 

あなたは、私がactionオフ型指定を引っ張ってきました気づくかもしれません。

export function rootReducer(state: AppState, action): AppState { 

をこのタイプAction上dataの欠如文句TSを避ける​​ことができます：私はそれがとても型なし渡され、私が見た中で最もサンプルコードでは、アクションのタイプとしてActionを指定することに意味がわかりません。あるいは、作成する各レデューサーに対してカスタムアクションタイプを定義することもできます。

あなたがそれを過ぎると、私はデコレータの配列items$の名前を付けているので、あなたがアイテムを見ていない理由があると思います。だから：

@Component({ 
    selector: 'app-root', 
    template: `  
    <input type="text" #edit /> 
    <button (click)="actions.add({value:edit.value,action:'ADD'})">add</button> 
    <p>The list is:</p> 
    <ul> 
     <li *ngFor="let item of (items$ | async)"> 
     {{item}} 
     </li> 
    </ul> 
    `, 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 
    @select() readonly items$: Observable<string[]>; 

がうまくいきます。注：valueだけが必要なので、入力全体を渡すのを避けるためにボタン定義を微調整しました。