тип хранилища ngrx при использовании функционального модуля

#angular #ngrx

#angular #ngrx

Вопрос:

Насколько я понимаю, если я должен использовать модули функций, я создаю фрагмент состояния для каждой функции:

StoreModule.forFeature('user', userReducer.reducer)

И в корневом модуле я делаю

StoreModule.forRoot({})

Теперь, когда я хочу использовать хранилище в своем компоненте, я просто внедряю хранилище:

constructor( private store: Store<any>)

и

this.store.select(state => state.user.saveError)
.subscribe((error) => {
this.toastOptions.msg = error;
this.toastyService.error(this.toastOptions);
});

Если все это верно, то каков правильный тип переменной хранилища здесь?

Комментарии:

1. в основном store: Store<{user: Object}>

2. имя вашего класса, которое содержит user amp; user.saveError

3. Я бы также добавил, потратьте некоторое время на поиск с помощью селекторов: экспортируйте const selectUserState = state => state.user как UserState; затем вы можете использовать канал (select(selectUserState))

Ответ №1:

Определенного типа не существует, поскольку хранилище нетипизировано, но вы можете определить интерфейсы, чтобы сделать его типизированным для разработки. Для StoreModule.forFeature('user', userReducer.reducer) чего он добавляет свойство user в корневом состоянии, которое будет содержать состояние объекта. Хранилище, которое вы вводите, всегда содержит все состояния для всего приложения, поэтому вы должны использовать селекторы. Есть две возможности, как вы могли бы ввести хранилище.

Первый — просто сосредоточиться на том, что вы видите внутри функционального модуля, и игнорировать остальное. Тогда это похоже на то, что предлагается в комментариях. Например, если вы определили состояние для своей функции, созданной пользователем Reducer:

 export interface UserState {
  saveError: string;
}
  

Тогда, поскольку вы назвали функцию user , тип для хранилища может быть определен как:

 export interface ApplicationState {
  user: UserState;
}
  

Второй вариант, если вы заранее знаете все функции, вы можете определить интерфейс для всей структуры хранилища.

Например, у вас есть другой компонент с другим состоянием:

 export interface AnotherFeatureState {
  stateProperty: string;
}
  

Тогда состояние приложения будет:

 export interface ApplicationState {
  user?: UserState;
  anotherFature?: AnotherFeatureState;
}
  

Я сделал свойства состояния необязательными, потому что модули могут загружаться с задержкой, и в таком случае свойства не существуют до тех пор, пока модули не будут загружены. Если вы не выполняете отложенную загрузку, вы можете предположить, что они всегда там.

В обоих случаях способ ввода конструктора является:

 constructor(private store: Store<ApplicationState>)