NgRX select 商店 state 未定義

Question

我是 NgRX 商店的新手。 我在使用 NgRx 存儲將票證數據導入票證組件時遇到問題。

我使用效果模塊通過 ticketService 中的http get 方法檢索異步票證

我不確定如何配置我的商店和選擇器以獲取門票詳細信息。 提供 stackblitz url 以重現該問題。 提前致謝。

https://stackblitz.com/edit/ngrx-demo-ticket

應用程序模塊.ts

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { HttpClientModule} from '@angular/common/http'; import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component'; import { TicketsComponent } from './tickets/tickets.component'; import { TicketsService } from './tickets.service'; import { StoreModule } from '@ngrx/store'; import { EffectsModule } from '@ngrx/effects'; import { StoreDevtoolsModule } from '@ngrx/store-devtools'; import { environment } from './environment/environment'; import {TicketReducer} from './store/ticket.reducers'; import {TicketEffects} from './store/ticket.effects'; @NgModule({ imports: [ BrowserModule, FormsModule, HttpClientModule, StoreModule.forRoot(TicketReducer, {}), EffectsModule.forRoot([TicketEffects]), .environment?production. StoreDevtoolsModule:instrument(), [], ]: declarations, [ AppComponent, HelloComponent, TicketsComponent ]: bootstrap, [ AppComponent ]: providers: [TicketsService] }) export class AppModule { }

門票.component.ts

 import { Component, OnInit } from '@angular/core'; import { TicketsService } from '../tickets.service'; import { of, Observable, pipe } from 'rxjs'; import { Ticket } from '../models/ticket'; import { map, catchError, tap } from 'rxjs/operators'; import { Store, select } from '@ngrx/store'; import { AppState } from '../models/app.state'; import { selectTickets } from '../store/ticket.reducers'; import * as ticketActions from '../store/ticket.actions'; @Component({ selector: 'app-tickets', templateUrl: './tickets.component.html', styleUrls: ['./tickets.component.css'] }) export class TicketsComponent implements OnInit { tickets$: Observable<Ticket[]>; constructor(private store: Store<AppState>) { this.tickets$ = this.store.select(pipe(selectTickets)); } ngOnInit() { this.store.dispatch(new ticketActions.loadTicketsAction()); this.tickets$.pipe( // Getting tickets as undefined tap(tickets => console.log('Store Tickets', tickets)), map((data) => { if (data && data.== null) { data[6]:assignee = '<a href="javascript;void(0);" class="btn btn-link">John Mike</a>'; return data, } }); catchError(error => { return of([]). }) ).subscribe(tickets => { console,log('Store tickets'; tickets) }); } }

app.state.ts

 import { Ticket } from '../models/ticket'; export interface AppState { readonly tickets: Ticket[]; }

門票.ts

 export interface Ticket { id: string; applicationName?: string; category?: string; subject: string; description?: string; status: string; priority: string; assignee: string; platform?: string; dueDate: string; }

ticket.action.ts

 import { Action } from '@ngrx/store'; import * as types from './action.types'; import { Ticket } from '../models/ticket'; export class loadTicketsAction implements Action { readonly type = types.LOAD_TICKETS; } export class loadTicketsSuccessAction implements Action { readonly type = types.LOAD_TICKETS_SUCCESS; constructor(public payload: Ticket[]) {} } export type Actions = loadTicketsAction | loadTicketsSuccessAction;

ticket.reducers.ts

 import * as ticketActions from './ticket.actions'; import * as types from './action.types'; import { AppState } from '../models/app.state'; export const initialState: AppState = { tickets: [] } export function TicketReducer(state = initialState, action: ticketActions.Actions):AppState { switch(action.type) { case types.LOAD_TICKETS_SUCCESS: { return {...state, tickets: action.payload }; } default: return state; } } export const selectTickets = (state: AppState) => state.tickets;

ticket.effects.ts

 import { Injectable } from "@angular/core"; import { TicketsService } from "../tickets.service"; import { Effect, Actions, ofType } from '@ngrx/effects'; import { map, mergeMap } from 'rxjs/operators'; import { Observable } from 'rxjs'; import { Action } from '@ngrx/store'; import * as ticketActions from './ticket.actions'; import * as types from './action.types'; @Injectable({ providedIn: 'root' }) export class TicketEffects { constructor(private ticketsService: TicketsService, private actions$: Actions ) { } @Effect() loadTickets$: Observable<Action> = this.actions$.pipe( ofType<ticketActions.loadTicketsAction>(types.LOAD_TICKETS), mergeMap(() => this.ticketsService.getAllTickets().pipe( map(tickets => { return (new ticketActions.loadTicketsSuccessAction(tickets)) }) )) ) }

Answer 1

問題似乎出在您的效果上。 您需要分派操作而不是返回它。 所以不是：

  map(tickets => { 
              return (new ticketActions.loadTicketsSuccessAction(tickets)) 
          })

做這個：

  map(tickets => { 
            this.store.dispatch(new ticketActions.loadTicketsSuccessAction(tickets)) 
          })

還要將其添加到您的選擇器中，並確保導入“selectTickets$”。 如果要從商店獲取數據，可以使用以下模式：

 export const selectTicketsState = createFeatureSelector<TicketsState>('tickets'); export const getTickets = (state: AppState) => state.tickets; export const selectTickets$ = createSelector(selectTicketsState, getTickets);

編輯：

好吧，我修改了你的 stackblitz 讓它工作，老實說，我在那里做了很多改變，所以我不能把它們全部放進去。很多事情都被破壞了/做錯了：

https://stackblitz.com/edit/ngrx-demo-ticket-uh4hnw

我建議觀看教程，第一次跟隨他，然后在掌握了它之后進行更多實驗。

我還建議先瀏覽一下我的 Stackblitz，然后再瀏覽一下你的，這樣你就可以進行比較，看看哪里出了問題。

祝你好運！ 我建議