问题
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.
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
is added like this:
//part of the AppModule
...
imports:[
...,
StoreModule.provideStore(rootReducer)
]
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');
}
}
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).
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.
回答1:
The store's select method can be passed one or more property strings or a selector function.
When passed property strings, it behaves like pluck. And when passed a selector function, it behaves like map.
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.
If you use selector functions, instead, you will see TypeScript errors for missing properties, etc.
For example, this:
store.select(state => state.missing);
will effect an error, whereas this will not:
store.select('missing');
来源:https://stackoverflow.com/questions/44510266/store-vs-storet