angular - ngrx/store 选择器返回函数而不是对象

Question

我正在关注示例应用程序 ( https://github.com/ngrx/example-app )，我所有的存储、效果、操作都运行良好，但是当使用缩减程序文件中定义的选择器与容器文件中定义的选择器时，我会遇到奇怪的行为。 reducer 文件中定义的选择器返回函数，而容器文件中定义的选择器返回对象。我复制了代码片段来详细解释这一点。我想定义共享选择器，因此易于维护和升级，而不是每次都在容器组件中定义。如果有人阐明了解决此问题的方法，我将不胜感激。

//package.json

{
    dependencies: {
        "@angular/common": "2.2.1",
        "@angular/compiler": "2.2.1",
        "@angular/compiler-cli": "2.2.1",
        "@angular/core": "2.2.1",
        "@angular/forms": "2.2.1",
        "rxjs": "^5.0.0-beta.12",        

        "@ngrx/core": "^1.2.0",
        "@ngrx/effects": "^2.0.0",
        "@ngrx/store": "^2.2.1",
        "@ngrx/store-devtools": "^3.2.3",
        "reselect": "^2.5.4"        
        ....
    },
}

//空间.reducer.ts//空间接口(interface)和 reducer

export interface SpaceState {
    lastUpdated?: Date,

    spacesLoaded: boolean,
    spaces: {[key: string]: Space}
}

export const INITIAL_STATE: SpaceState = {
    lastUpdated: new Date(),

    spacesLoaded: false,
    spaces: {},
};

export const getMap = (state: SpaceState) => state.spaces;

//应用程序.reducer.ts//组合状态接口(interface)和reducer

import * as fromSpace from "./space.reducer.ts";

export interface ApplicationState{
    spaceState: SpaceState
}

export const INITIAL_APPLICATION_STATE: ApplicationState = {
    spaceState: fromSpace.INITIAL_STATE
};

const reducers = {
    spaceState: fromSpace.reducer
};

const reducer: ActionReducer<ApplicationState> = combineReducers(reducers);

export function reducer(state: any, action: any) {
    return reducers;
}

export const getSpaceState = (state: ApplicationState) => state.spaceState;
export const getSpaceMap = (state: ApplicationState) => createSelector(getSpaceState, fromSpace.getMap);

//空间.容器.ts//容器组件

export class SpacesComponent implement onInit() {
    constructor(private store: Store<ApplicationState>) {}

    ngOnInit(): void {
        this.store.select(getSpaceMap).subscribe(map => {
            console.log("subscribe of space-map (using shared func) from container: " + map);
        });

        this.store.select((state) => state.spaceState.spaces).subscribe(map => {
            console.log("subscribe of space-map (using container func) from container: " + map);
        });
    }
}

//容器输出

subscribe of space-map (using shared func) from container: function selector(state, props) {
      for (var _len4 = arguments.length, args = Array(_len4 > 2 ? _len4 - 2 : 0), _key4 = 2; _key4 < _len4; _key4++) {
        args[_key4 - 2] = arguments[_key4];
      }

      var params = dependencies.map(function (dependency) {
        return dependency.apply(undefined, [state, props].concat(args));
      });
      return memoizedResultFunc.apply(undefined, _toConsumableArray(params));
    }

subscribe of space-map (using container func) from container: [object Object]

Answer 1

您正在调用您的 getSpaceMap 选择器中似乎是 reselect 的 createSelector 并返回其结果，这就是它返回函数的原因。您的选择器正在返回另一个选择器。

相反，您应该将 createSelector 的结果分配给 getSpaceMap:

export const getSpaceMap = createSelector(getSpaceState, fromSpace.getMap);