NgRx無法從商店中選擇

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

Devtool：

---更新----

的問題是，當我在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; 
    } 
}

來源

2017-10-13 FussinHussin

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

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

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

在你的構造，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); 
}

來源

2017-10-13 17:35:25 cdbajorin

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

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

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

NgRx無法從商店中選擇

回答

相關問題