Я очень плохо знаком с ngrx, и просто пытаюсь разобраться с этим и заставить что-то работать.
Я добавил ngrx (версия 8.3) в свое приложение.
Я хотел бы иметь несколько вещей в корневом состоянии (если это возможно), а затем иметь отдельные состояния для каждой из моих функций. Я начал с корневого состояния, но мой селектор просто никогда не уведомляется.
У меня есть следующие действия ...
// actions
import { createAction, union } from '@ngrx/store';
import { SecurityTokensState } from './app.reducer';
export const setUrl = createAction(
'[App url] ',
(payload: string) => ({ payload })
);
export const setTokens = createAction(
'[App setSecurityTokens] ',
(payload: SecurityTokensState) => ({ payload })
);
export const actions = union({
setUrl,
setTokens
});
export type ActionsUnion = typeof actions;
И следующие редукторы ..
import * as rootActions from './app.actions';
import { createReducer, on } from '@ngrx/store';
/** Top level state */
export interface State {
/** State to do with Auth */
tokens: SecurityTokensState;
/** General / root app state (eg configuration) */
app: AppState
}
/** App wide general state */
export interface AppState {
url: string;
//extraLogging: boolean;
//offlineExpiry: number;
//offlineTime: number;
}
/** Security token state */
export interface SecurityTokensState {
token: string,
refreshToken: string;
}
const initialState: State = { tokens: undefined, app: { url: ""} };
export function rootReducer(state: State, action: rootActions.ActionsUnion): State {
return reducer(state, action);
}
const reducer = createReducer(
initialState,
on(rootActions.setTokens,
(state, { payload }) => ({ ...state, tokens: payload })
),
on(rootActions.setUrl,
(state, { payload }) => ({ ...state, app: updateUrl(state, payload)}))
)
/** Helper to update the nested url */
const updateUrl = (state: State, payload: string): AppState => {
const updatedApp = { ...state.app };
updatedApp.url = payload;
return updatedApp;
}
И я создал следующий селектор ...
import { createFeatureSelector, createSelector } from "@ngrx/store";
import { AppState } from './app.reducer';
const getAppState = createFeatureSelector<AppState>('app');
export const getUrl = createSelector(
getAppState,
state => state.url
);
В app.module у меня есть следующее ...
StoreModule.forRoot(rootReducer),
Теперь, в компоненте,У меня есть
import * as rootSelectors from '../state/app.selectors';
....
public onUrlBlur(ev : any): void {
let val = ev.target.value;
this.store.dispatch(rootActions.setUrl(val));
}
И у меня есть код, чтобы подписаться на обновление
this.subs.sink =
this.store.pipe(select(rootSelectors.getUrl)).subscribe(url => {
this.urlEntered = url
});
Наконец, в качестве заполнителя, в одном из моих функциональных модулей я добавил ...
StoreModule.forFeature('myfeature1', {})
Я вижу, как вызывается функция размытия, а в инструментах dev-редуктора я вижу
Но для состояниявсе, что я вижу, это
И наблюдаемый this.store.pipe (select (rootSelectors.getUrl)). subscribe (url => {`никогда не срабатывает
Так что моего корневого состояния там просто нет, и я действительно не вижу, что я сделал неправильно.
Есть ли у кого-нибудь указатели на то, где я испортилздесь?
чеЗаранее спасибо за любую помощь!
[ОБНОВЛЕНИЕ1]
Добавлен очень похожий пример (с той же проблемой) здесь
При запуске и переходе на консоль можно увидеть следующее ...
selector.ts:610 The feature name "appRoot" does not exist in the state, therefore createFeatureSelector cannot access it. Be sure it is imported in a loaded module using StoreModule.forRoot('appRoot', ...) or StoreModule.forFeature('appRoot', ...). If the
Что я не понимаю, если использовать StoreModule.forRoot(rootReducer ),
Вошибка, он предлагает использовать строку ... например, StoreModule.forRoot('app', rootReducer ),, но это дает синтаксическую ошибку.
Если я сделаю следующее ...
StoreModule.forRoot({appRoot: rootReducer} ),
, я получу вложенное состояние. ..
Но просто минуя редуктор,
StoreModule.forRoot(rootReducer ),
Я не получаю состояния ...
Во всех примерах, которые я вижу, используются только состояния функций, но у меня есть ряд настроек, относящихся только к приложениям и включенных в функциональный модуль.
Кроме того, поскольку это состояние отсутствует в функциональном модуле, я не уверен, следует ли мне использовать createFeatureSelector ..
const getAppState = createFeatureSelector<AppState>('appRoot');
Очень запутанно ...
Любая помощь,с благодарностью.