如果未命名，ngrx state 未定義

Question

我掌握了ngrx的竅門，而且我已經成功了……但是我花了很長時間才這樣做，與我在網上看到的每個教程/演練相比，這是錯誤的，我想看看我能不能把它弄到一個正確的 state 上。

我的問題有兩個：

1. 如果我不給 state 起一個名字，它在瀏覽器中是未定義的。 這有效：

import { reducers } from './state/app.reducers';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    StoreModule.forRoot({ appState: reducers }),
    !environment.production ? StoreDevtoolsModule.instrument() : [],
    EffectsModule.forRoot([AppEffects]),
    StoreRouterConnectingModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

但是StoreModule.forRoot(reducers)像大多數示例一樣顯示，在運行時會導致未定義的 state。

2. 我相信，因為如果是這樣，我不能在根部引用 state 並且必須將其拔出。 例如，這有效：

export class MyComponent implements OnInit {
  state$: Observable<AppState>;
  userId$: Observable<string>;

  constructor(
    private store: Store<{appState: AppState}>
  ) {
    this.state$ = store.select('appState');
  }

  ngOnInit(): void {
    this.userId$ = this.state$.pipe(select(s => s.userId));
  }
}

我不能像大多數示例一樣直接從 state 中刪除 select，並且像大多數示例顯示的那樣，僅注入private store Store<AppState> 。

如果有幫助，我的 state 在運行時如下所示：

{
  appState: {
    userId: 'd229b5ef-b7a8-2600-6eed-427ee7b10637',
    userName: 'test',
  }
}

以供參考...

// app/state/app.state.ts
export interface AppState {
  userId: string;
  userName: string;
}

export const initialState: AppState = {
  userId: null,
  userName: null
}

// app/state/app.reducers.ts
import { initialState } from './app.state';

const reducer = createReducer(
  initialState,
  on(updateUser, (state, { userId, userName })=> (
    {
      ...state,
      userId: userId,
      userName: userName
    }))
);

export function reducers(state, action) {
  return reducer(state, action);
}

// app/state/app.selectors.ts
import { AppState } from './app.state';

export const selectUserId = (state: AppState) => state.userId

所以我有點不知所措。 我已經讓它工作了，我可以在其中存儲 state 並在運行時獲取它，但這不是慣用的，而且它似乎很脆弱。

Answer 1

問題是您將一個減速器作為減速器導出，然后嘗試使用它。 您需要導出該減速器並創建一組減速器，您將在StoreModule.forRoot()中將其用作減速器。 代碼示例：

 // app/state/app.reducers.ts import { initialState } from './app.state'; const reducer = createReducer( initialState, on(updateUser, (state, { userId, userName })=> ( {...state, userId: userId, userName: userName })) ); export function reducer(state, action) { // changed from 'reducers' to reducer return reducer(state, action); }

創建一個名為index.ts的新文件：

 // app/state/index.ts import * as fromApp from 'app/state/app.reducer.ts', export const reducers = [ appState: fromApp.reducer ]

然后導入減速器：

 import { reducers } from './state/index.ts'; @NgModule({ declarations: [ AppComponent, ], imports: [ StoreModule.forRoot(reducers), .environment?production. StoreDevtoolsModule:instrument(), []. EffectsModule,forRoot([AppEffects]). StoreRouterConnectingModule,forRoot() ]: providers, []: bootstrap: [AppComponent] }) export class AppModule { }