商店与商店T [英] Store vs Store<T>

问题描述

我是使用redux模式的新手，并且刚刚开始使用ngrx.太棒了，我想尽可能多地使用它，但是我对Store概念有一些疑问.

I'm pretty much a novice with the redux pattern and have just started using ngrx. It's awesome and it's something I want to use as much as possible, but I have a couple of questions regarding the Store concept.

我将尝试通过一些示例来描述问题，并在本文结尾处提出我的问题.

I will try to describe the problem through a few samples and ask my question at the end of this post.

让我们从AppState界面和reducers入手:

Let's start with the AppState interface and reducers:

export interface AppState{
   people: Person[],
   events: Event[]
}

//events reducer
export function eventsReducer(state: any = {}, {type, payload}): Event[]{
  switch(type){
    case "ADD_EVENT":
      return [...state, payload];
    default:
      return state;
  }
}

//people reducer
export function peopleReducer(state: any = {}, {type, payload}): Person[]{
  switch(type){
    case "ADD_PERSON":
      return [...state, payload];
    default:
      return state;
  }
}

//root reducer
const root: ActionReducer<AppState> = combineReducers({people: peopleReducer, events: eventsReducer});
const INITIAL_STATE = {
   people:[],
   events: []
}
export function rootReducer(state: any = INITIAL_STATE, action: any){
   return root(state, action);
}

rootReducer这样添加:

//part of the AppModule
...
imports:[
...,
StoreModule.provideStore(rootReducer)
]

在主AppComponent中，这是我访问store的方式:

And in the main AppComponent here is how I'm accesing the store:

//part of the AppComponent
export class AppComponent{
   people: Observable<Person[]>;
   events: Observable<Event[]>;

   constructor(private store: Store<AppState>){
      this.people = store.select('people');
      this.events = store.select('events');
   }
}

现在，一切正常，我真的很喜欢这个概念，但是我注意到，如果我从AppState界面中删除其中一个属性(例如，删除了people属性，其他所有内容都保持不变).

Now, everything works correctly and I really like this concept, but I've noticed that nothing changes (or breaks) if I remove one of the properties from the AppState interface (for example, I remove the people property, everything else stays the same).

所以我想知道使用Store<AppState>而不是仅仅使用Store的主要原因是什么，以及使用Store<AppState>的主要优点是什么(实际上与仅使用Store有所不同) ?另外，是否有一种方法可以在AppState更改时至少强制执行运行时错误，但其他所有条件保持不变?

So I would like to know what is the main reason for having Store<AppState> instead of just Store and what are the main advantages of using Store<AppState> (where it's actually made a difference against just using Store)? Also, is there a way to enforce at least runtime errors when AppState changes, but everything else stays the same?

我错误使用它的可能性也很高，但是我仍然想知道这些问题的答案.

The possibility of me using it wrong is very high as well, but I would still like to know answers to these questions.

推荐答案

商店的 select方法可以传递一个或多个属性字符串或选择器函数.

The store's select method can be passed one or more property strings or a selector function.

传递属性字符串时，其行为类似于 pluck .并且当传递选择器函数时，其行为类似于 map .

When passed property strings, it behaves like pluck. And when passed a selector function, it behaves like map.

这两者之间的显着区别是，无法检查传递给pluck的属性路径，并且pluck返回Observable<any>，因此该状态的类型信息实际上会丢失.

The significant difference between these is that the property path(s) passed to pluck cannot be type checked and pluck returns Observable<any>, so the state's type information is essentially lost.

如果您使用选择器功能，则会看到TypeScript错误(缺少属性等).

If you use selector functions, instead, you will see TypeScript errors for missing properties, etc.

例如，此:

store.select(state => state.missing);

将导致错误，而不会:

store.select('missing');

这篇关于商店与商店T的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！