2017-10-13 146 views
0

我正在做一個非常簡單的NgRx實現,現在只是做一個組件的get。數據根據Redux Devtool在有效負載中傳遞,但我似乎無法通過異步管道訪問它。NgRx無法從商店中選擇

Devtool:

redux dev tool state redux dev tools image payload

---更新----

的問題是,當我在TS文件訪問該片,我得到的錯誤

''network''類型的參數不能分配給類型爲 的參數''start''。

TS文件

constructor(private store: Store<fromApp.AppState>) {} 
getDns() { 
     // reach out to ngrx store 
     this.dnsServers$ = this.store.select('network').map(network => network.dns) 
     console.log(this.dnsServers$) 
     // get current dns IPs' 
     this.networkService.getDns() 
      .subscribe(
       (dnsList: Dns) => { 
        console.log(dnsList.dns); 
        this.store.dispatch(
         new LoadIpSuccessAction(dnsList.dns) 
        ) 
       } 
      ) 
    } 

我的功能模塊

StoreModule.forFeature('network', { dns: dnsReducer })

我的根減速機(我沒有不加載任何偷懶的模塊,所以我的根減速機是空的...不知道如何使其工作)

import { Action } from '@ngrx/store'; 

export interface State { 
    start: string; 
} 

const initialState: State = { 
    start: '' 
} 

export function startReducer(state = initialState, action: Action) { 
    return state; 
} 

和我的更新功能減速訪問DNS陣列

import * as NetworkActions from './network.actions'; 
import * as fromApp from '../../store/app.reducers'; 

export interface NetworkState extends fromApp.AppState { 
    dns: DnsState; 
} 

export interface DnsState { 
    dns: string[]; 
} 

const initialState: DnsState = { 
    dns: [] 
} 

export function dnsReducer(state = initialState, action: NetworkActions.DnsActions) { 
    switch (action.type) { 
     case NetworkActions.LOAD_IP_SUCCESS: 
      return { 
       ...state, 
       dns: [...action.payload] 
      } 
     default: 
      return state; 
    } 
} 
+0

嘗試設置的dnsserver = this.store.select的定義( 'DNS')getDns之外()。如果您使用的是類型,請將類型設置爲Obseravble for dnsServer。 – deek

+0

getDns()在ngOninit()中被調用,所以我不關心它是否在外面。我最終會輸入observable,但那不是解決問題 – FussinHussin

+0

我想我知道。返回的有效載荷對象可能與訂閱獲取然後立即設置的值不同。可能最初只是空的,異步沒有任何迴應,但稍後會在調度後更新。但是,由於預計未定義DNS,導致它出錯。因此,爲什麼它沒有安全操作員而失敗,但卻安全地工作這些值稍後更新爲工作值。 如果您將默認狀態設置爲具有DNS和某些假值的對象,它將起作用....嘗試一下! – deek

回答

2

在你的構造,store指的是整個應用程序的狀態,而不僅僅是network。它應該是

constructor(..., private store: Store<fromApp.AppState>) {} 

你需要使用

this.dnsServers$ = this.store.select('network').map(network => network.dns); 

除了訪問它,action.payload{dns: ["6.7.7.7", "5.5.5.5"]}。當您在減速分配給它,你正在做dns: [action.payload],所以你與NetworkState之中結束了:

{ 
    dns: [ 
     { dns: ["6.7.7.7", "5.5.5.5"] } 
     ] 
} 

如果你想你想要的狀態的片,每次以減少你的構造邏輯,你可以使用選擇:

import { createFeatureSelector, createSelector } from "@ngrx/store"; 

export const selectNetwork = createFeatureSelector<fromNetwork.NetworkState>('network'); 
export const selectNetworkDns = createSelector(selectNetwork, (state) => state.dns); 

要在構造函數中使用它:

constructor(private store: Store<fromApp.AppState>) { 
    this.dnsServers$ = this.store.select(selectNetworkDns); 
} 
+0

我想通了。在我的模塊中,我有'StoreModule.forFeature('network',dnsReducer)'而不是'StoreModule.forFeature('dns',dnsReducer)'',我是傳遞對象而不是列表,所以這也有幫助。我在狀態「網絡」下有多個reducer,所以我必須弄清楚如何構造... – FussinHussin

+1

您可以傳遞一個對象:'.forFeature('network',{dns:dnsReducer,otherThing:otherThingReducer })'。另請看[選擇器](https://github.com/ngrx/platform/blob/master/docs/store/selectors.md)。它將刪除任何需要在'.select()'後面調用'.map()'來得到狀態的片段。 – cdbajorin

+0

哦,男人,你是最好的,這正是我所期待的!但有一點,你如何從網絡分片訪問DNS?謝謝!如果你想更新你的答案,那麼我將把它標記下來 – FussinHussin