NgRx 无法从商店中选择

Question

我正在做一个非常简单的 NgRx 实现，现在只是为一个组件做 get。根据 Redux Devtool，数据来自有效负载，但我似乎无法通过异步管道访问它。

开发工具：

---更新----

问题是当我访问我的 ts 文件中的切片时，我得到了错误

“网络”类型的参数不能分配给类型参数 '“开始”'。

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;
    }
}

Answer 1

在您的构造函数中，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);
}