Javascript ngrx 中的 store.select 是什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38921239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is store.select in ngrx
提问by blackHawk
I'm new to Redux and started with ngrx. I'm unable to understand the meaning of this line of code store.select:
我是 Redux 的新手，从 ngrx 开始。我无法理解这行代码的含义store.select：
clock: Observable<Date>;
this.clock = store.select('clock');
回答by Mav55
In very simple terms select gives you back a slice of data from the application state wrapped into an Observable.
用非常简单的术语来说，select 会从包装到 Observable 中的应用程序状态中返回一部分数据。
What it means is, select operator gets the chunk of data you need and then it converts it into an Observable object. So, what you get back is an Observable that wraps the required data. To consume the data you need to subscribe to it.
它的意思是，选择运算符获取您需要的数据块，然后将其转换为 Observable 对象。所以，你得到的是一个封装了所需数据的 Observable。要使用您需要订阅的数据。
Lets see a very basic example.
让我们看一个非常基本的例子。
Lets define the model of our store
export interface AppStore { clock: Date }
Import the Store into your component from '@ngrx/store'
Create a store by injecting into the constructor
constructor(private _store: Store<AppStore>){}Select returns an Observable.
So, declare the clock variable in your component as follows:-
public clock: Observable<Date>;Now you can do something like follows:-
this.clock = this._store.select('clock');
让我们定义我们商店的模型
导出接口 AppStore { 时钟：日期 }
将 Store 从“@ngrx/store”导入到您的组件中
通过注入构造函数来创建存储
constructor(private _store: Store<AppStore>){}Select 返回一个 Observable。
因此，在您的组件中声明时钟变量如下：-
public clock: Observable<Date>;现在您可以执行以下操作：-
this.clock = this._store.select('clock');
回答by wiredprogrammer
Wow, this is a big topic. So basically "select" is really a RXJS operator that is used in this case to retrieve the value of a part of the application state object. So say your main app state has a array of users and a array of security functions. "Select" allows you to get a reference to a observable whose value is just that array of users. Before you get into ngrx you really need to study up on Observables and RXJS. I found this article linked off of the main Github project page for ngrx helpful.
哇，这是一个很大的话题。所以基本上“select”实际上是一个 RXJS 运算符，在这种情况下用于检索应用程序状态对象的一部分的值。因此，假设您的主应用程序状态具有一组用户和一组安全功能。“选择”允许您获得对一个 observable 的引用，该 observable 的值就是该用户数组。在你进入 ngrx 之前，你真的需要学习 Observables 和 RXJS。我发现这篇文章从 ngrx 的主要 Github 项目页面链接出来很有帮助。
https://gist.github.com/btroncone/a6e4347326749f938510
https://gist.github.com/btroncone/a6e4347326749f938510
RXJS and redux can be a big topic but I suggest working on your knowledge in small bite size chunks. It took me about 2 months of working with it before I really started to feel comfortable. Even if you don't stay with ngrx, understanding how RXJS works is incredibly useful and is worth the time investment to learn it.
RXJS 和 redux 可能是一个很大的话题，但我建议以小块大小的块来研究你的知识。在我真正开始感到舒服之前，我花了大约 2 个月的时间使用它。即使你不使用 ngrx，理解 RXJS 的工作原理也非常有用，值得花时间学习它。
Here is a gist article that also gives a good intro into RXJS. https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
这是一篇 gist 文章，它也很好地介绍了 RXJS。 https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
回答by Derek Kite
It returns the state called 'clock'.
它返回称为“时钟”的状态。
Here is an example. In the constructor store.select is called, this time with 'todos'.
这是一个例子。在构造函数中 store.select 被调用，这次是 'todos'。
https://github.com/btroncone/ngrx-examples/blob/master/todos/src/app/todo-app.ts
https://github.com/btroncone/ngrx-examples/blob/master/todos/src/app/todo-app.ts
export class TodoApp {
public todosModel$ : Observable<TodoModel>;
//faking an id for demo purposes
private id: number = 0;
constructor(
private _store : Store<AppState>
){
const todos$ = _store.select<Observable<Todo[]>>('todos');
const visibilityFilter$ = _store.select('visibilityFilter');
...
...
In the bootstrap, provideStore is given APP_REDUCERS
在引导程序中，provideStore 被赋予 APP_REDUCERS
import {bootstrap} from '@angular/platform-browser-dynamic';
import {TodoApp} from './todo-app';
import {provideStore} from "@ngrx/store";
import * as APP_REDUCERS from "./reducers/reducers";
export function main() {
return bootstrap(TodoApp, [
provideStore(APP_REDUCERS)
])
.catch(err => console.error(err));
}
APP_REDUCERS is all the reducers defined. The todos reducer is defined as follows:
APP_REDUCERS 是定义的所有减速器。todos reducer 定义如下：
import {ActionReducer, Action} from "@ngrx/store";
import {Todo} from "../common/interfaces";
import {ADD_TODO, REMOVE_TODO, TOGGLE_TODO} from "../common/actions";
export const todos : ActionReducer<Todo[]> = (state : Todo[] = [], action: Action) => {
switch(action.type) {
case ADD_TODO:
return [
...state,
action.payload
];
There are a few ways to do this, and you can compose a list of all your reducers, essentially defining a series of object keys that refer to a reducer object.
有几种方法可以做到这一点，您可以编写所有减速器的列表，本质上定义一系列引用减速器对象的对象键。
Store.select returns an observable that you can subscribe to either in your component or template via '|async'.
Store.select 返回一个 observable，您可以通过“|async”在您的组件或模板中订阅它。
回答by viveksharma
This.store.select('keyname') will return the data from store object of 'keyname' property has. you can further look for inner object in store using multiple reducer with StoreModule.forFeature("master", masterReducer) in main module with createSelector
This.store.select('keyname') 将返回来自 'keyname' 属性的 store 对象的数据。您可以使用 createSelector 在主模块中使用多个 reducer 和 StoreModule.forFeature("master", masterReducer) 进一步查找商店中的内部对象
export const getMasterState = createFeatureSelector<myModels.MasterState>('master');
export const getMatserBranchList = createSelector(
getMasterState,
(state: myModels.MasterState): myModels.Branch[] => state.branchList
);
