NGRX效果未存盤正確資料

我目前正在使用 NGRX Effect 從 JSONPlaceHolder Typicode API 獲取一些隨機資料。我已經寫了一些動作和減速器。效果運行良好，而且我在減速器中獲得了預期的資料......但它沒有出現在商店中。

用戶操作.ts

import { createAction, props } from '@ngrx/store';

export const FetchUsersRequest = createAction('[USERS] FETCH REQUEST');
export const FetchUsersSuccess = createAction(
  '[USER] FETCH SUCCESS',
  props<{ data: Array<any> }>()
);
export const FetchUsersFail = createAction(
  '[USER] FETCH SUCCESS',
  props<{ error: string }>()
);

UserReducer.ts

import { state } from '@angular/animations';
import { createReducer, on } from '@ngrx/store';
import * as UserActions from './User.actions';
import { UserService } from './user.service';

interface State {
  loading: boolean;
  error: string | null;
  users: Array<any>;
}

export const initialState: State = {
  loading: false,
  error: '',
  users: [],
};

export const userReducer = createReducer(
  initialState,
  on(UserActions.FetchUsersRequest, (state) => ({ ...state, loading: true })),
  on(UserActions.FetchUsersSuccess, (state, { data }) => {
    return { ...state, users: [...state.users, ...data] };
  }),
  on(UserActions.FetchUsersFail, (state, { error }) => ({
    ...state,
    loading: false,
    users: [],
    error,
  }))
);

用戶服務.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get('https://jsonplaceholder.typicode.com/users');
  }
}

UserEffect.ts

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import * as UserActions from './User.actions';
import { map, exhaustMap } from 'rxjs/operators';
import { UserService } from './user.service';

@Injectable()
export class UserEffects {
  constructor(private actions$: Actions, private userService: UserService) {}

  userFetch$ = createEffect(() =>
    this.actions$.pipe(
      ofType(UserActions.FetchUsersRequest),
      exhaustMap((action) =>
        this.userService.getUsers().pipe(
          map((response: any) => {
            console.log(response);
            return UserActions.FetchUsersSuccess({ data: response });
          })
        )
      )
    )
  );

}

應用模塊.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { EffectsModule } from '@ngrx/effects';
import { UserEffects } from './User/Users.effects';
import { userReducer } from './User/User.reducer';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    EffectsModule.forRoot([UserEffects]),
    StoreModule.forRoot({
      users: userReducer
    }),
    StoreDevtoolsModule.instrument({
      maxAge: 50,
    }),
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

在 App 組件中，我在 Button Click 上呼叫一個方法，該方法呼叫用戶獲取效果。

App.component.ts

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import * as UserActions from './User/User.actions';


interface AppState {
  users: any;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'ngrxtest';

  users$: Observable<any>;

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


  fetchUsers() {
    this.store.dispatch(UserActions.FetchUsersRequest());
  }
}

uj5u.com熱心網友回復：

由于您對成功和失敗具有相同的操作型別。它可能會重置減速器內部的資料嘗試重命名失敗操作型別

export const FetchUsersSuccess = createAction(
  '[USER] FETCH SUCCESS',
  props<{ data: Array<any> }>()
);
export const FetchUsersFail = createAction(
  '[USER] FETCH FAILURE',
  props<{ error: string }>()
);

標籤：有角的 接口 ngrx-商店 ngrx 效果

上一篇：在Angular中輸入六個字符長度后如何呼叫函式

下一篇：對話框以角度顯示在頁面底部