请考虑以下示例
// Example state
let exampleState = {
counter: 0;
modules: {
authentication: Object,
geotools: Object
};
};
class MyAppComponent {
counter: Observable<number>;
constructor(private store: Store<AppState>){
this.counter = store.select('counter');
}
}
在MyAppComponent中，我们对状态的counter属性发生的更改做出反应。但是，如果我们想要对状态的嵌套属性做出反应，例如modules.geotools，该怎么办？似乎应该有可能调用store.select('modules.geotools')，因为将所有内容置于全局状态的第一级似乎不利于整体状态结构。
更新
@cartant的答案肯定是正确的，但Angular 5中使用的NgRx版本需要一些不同的状态查询方式。我们的想法是，我们不能只提供store.select()调用的密钥，我们需要提供一个返回特定状态分支的函数。让我们将其称为stateGetter并将其编写为接受任意数量的参数（即查询深度）。
// The stateGetter implementation
const getUnderlyingProperty = (currentStateLevel, properties: Array<any>) => {
if (properties.length === 0) {
throw 'Unable to get the underlying property';
} else if (properties.length === 1) {
const key = properties.shift();
return currentStateLevel[key];
} else {
const key = properties.shift();
return getUnderlyingProperty(currentStateLevel[key], properties);
}
}
export const stateGetter = (...args) => {
return (state: AppState) => {
let argsCopy = args.slice();
return getUnderlyingProperty(state['state'], argsCopy);
};
};
// Using the stateGetter
...
store.select(storeGetter('root', 'bigbranch', 'mediumbranch', 'smallbranch', 'leaf')).subscribe(data => {});
...