Javascript NgRx存储-选择器不适用于根全局存储

我对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
  );

现在，在一个组件中，我有

   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', {})

我看到正在调用blur函数，并且在redux开发工具中看到

但对于国家来说，我所看到的只是

和可观察的this.store.pipe（select（rootSelectors.getUrl））.subscribe（url=>{`never-fires

所以我的根状态似乎不在那里，我真的看不出我做错了什么

我在哪里搞砸了

更新 添加了一个非常类似的示例（具有相同的问题）

运行时，转到控制台，可以看到以下内容

StoreModule.forRoot(rootReducer),

selector.ts:610功能名称“Approt”在状态中不存在，因此createFeatureSelector无法访问它。请确保使用StoreModule.forRoot（'Approt'，…）或StoreModule.forFeature（'Approt'，…）在加载的模块中导入它。如果

如果如何使用

StoreModule.forRoot（rootReducer），

在错误中，它建议使用字符串…例如

StoreModule.forRoot（'app'，rootReducer），

，但这会导致语法错误

如果我这样做：

 StoreModule.forRoot({appRoot: rootReducer} ),

我得到一个嵌套状态：

但只是通过减速器：

StoreModule.forRoot(rootReducer ),

我没有状态：

我看到的所有示例都只使用功能状态，但我有一些设置只是应用程序范围内的，而不是功能模块中的

此外，由于此状态不在功能模块中，我不确定是否应使用createFeatureSelector：

const getAppState = createFeatureSelector<AppState>('appRoot');

const getAppState=createFeatureSelector（'approt'）；

我猜您的reducer配置不正确，这就是为什么激发的操作没有改变状态。由于this.store.pipe（select（rootSelectors.getUrl））.subscribe（url=>{}的状态没有改变，所以永远不会激发此订阅。

StoreModule.forRoot（）

函数需要一个而不是reducer函数

有关更多信息，请参阅

要解决嵌套状态问题，在您的情况下，如下所示：

StoreModule.forRoot({
  tokens: tokensReducer,
  appRoot: appRootReducer
})

或者你可以：

StoreModule.forRoot({}),
StoreModule.forFeate('appRoot', appRootReducer)

---

请让我知道为什么我的问题被否决？你能在stackblitz或github上分享你的代码吗？我添加了一个关于url（以及参数和查询参数）的示例作为应用程序状态的一部分，有

@ngrx/router store

用于此。为什么要重新发明轮子？我回答了一个类似的问题，为此我添加了一个stackblitz示例。我没有意识到我们可以在根模块中同时使用

StoreModule.forRoot

和

StoreModule.forFeature

。这就是我现在所做和得到的它在继续。