NGRX 效果不存储正确的数据

Question

我目前正在使用 NGRX Effect 从 JSONPlaceHolder Typicode API 中获取一些随机数据。我已经写了一些 Actions 和 reducer。效果很好，而且我在我的减速器中得到了预期的数据......但是它没有出现在商店中。

UserActions.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,
  }))
);

UserService.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 });
          })
        )
      )
    )
  );

}

App.module.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());
  }
}

Answer 1

因为成功和失败的操作类型相同。它可能会重置 reducer 中的数据尝试重命名失败操作类型

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

NGRX 效果不存储正确的数据

NGRX effect not storing correct data

angular

api

ngrx-store

ngrx-effects