Angular ngrx/存储选择器返回函数而不是对象
我遵循示例app(),我的所有存储、效果和操作都运行得很好,但是当使用reducer文件中定义的选择器和容器文件中定义的选择器时,我的行为变得很奇怪。reducer文件中定义的选择器返回函数,而容器文件中定义的选择器返回对象。我复制了代码片段来详细解释这一点。我想定义共享选择器,因此它易于维护和升级,而不是每次都在容器组件中定义。如果有人能帮我解决这个问题,我将不胜感激 //package.jsonAngular ngrx/存储选择器返回函数而不是对象,angular,ngrx,reselect,Angular,Ngrx,Reselect,我遵循示例app(),我的所有存储、效果和操作都运行得很好,但是当使用reducer文件中定义的选择器和容器文件中定义的选择器时,我的行为变得很奇怪。reducer文件中定义的选择器返回函数,而容器文件中定义的选择器返回对象。我复制了代码片段来详细解释这一点。我想定义共享选择器,因此它易于维护和升级,而不是每次都在容器组件中定义。如果有人能帮我解决这个问题,我将不胜感激 //package.json { dependencies: { "@angular/common":
{
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"
....
},
}
//空格.ts
//空间接口与减速器
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;
//应用程序.ts
//复合状态接口与减速器
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);
import*作为fromSpace从“/space.reducer.ts”导入;
导出接口应用程序状态{
spaceState:spaceState
}
导出常量初始应用程序状态:应用程序状态={
spaceState:fromSpace.INITIAL\u状态
};
常数减缩器={
spaceState:fromSpace.reducer
};
常量减速机:ActionReducer=组合减速机(减速机);
导出函数减速器(状态:任意,操作:任意){
返回减速器;
}
export const getSpaceState=(状态:ApplicationState)=>state.spaceState;
export const getSpaceMap=(状态:ApplicationState)=>createSelector(getSpaceState,fromSpace.getMap);
//spaces.container.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);
});
}
}
导出类SpacesComponent实现onInit(){
构造函数(私有存储:存储){}
ngOnInit():void{
this.store.select(getSpaceMap).subscribe(map=>{
log(“从容器订阅空间映射(使用共享func):+map”);
});
this.store.select((state)=>state.spaceState.spaces).subscribe(map=>{
log(“从容器订阅空间映射(使用容器函数):+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]
从容器订阅空间地图(使用共享func):函数选择器(状态,道具){
对于(var\u len4=arguments.length,args=Array(\u len4>2?\u len4-2:0),\u key4=2;\u key4<\u len4;\u key4++){
args[_-key4-2]=参数[_-key4];
}
var params=dependencies.map(函数(依赖项){
返回dependency.apply(未定义,[state,props].concat(args));
});
返回memorizedResultFunc.apply(未定义,返回umableArray(参数));
}
从容器[object]订阅空间地图(使用容器函数)
您在getSpaceMap
选择器中调用似乎是重新选择的createSelector
,并返回其结果,这就是它返回函数的原因。您的选择器正在返回另一个选择器
相反,您应该将createSelector
的结果分配给getSpaceMap
:
export const getSpaceMap=createSelector(getSpaceState,fromSpace.getMap);
非常感谢,这有助于解决问题。我的错误剪切和粘贴导致了此问题:(