Question

我正在使用ngrx Effects对服务器进行http调用。但是效果并没有被调用。我想在组件加载时进行http调用。因此，我在ngOnInit中执行了store.dispatch，但是什么也没发生。

users.component.ts：

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import * as fromUsersReducer from './states/users.reducer';
import * as UsersActions from './states/users.action';
export class UsersComponent implements OnInit {
  constructor(
    private store: Store<fromUsersReducer.State>,
  ) { }
  ngOnInit() {
    this.store.dispatch(new UsersActions.Load());
  }
}

users.actions.ts

export enum UsersActionTypes {
  Load = '[Users] Load',
  LoadSuccess = '[Users] Load Success',
  LoadFail = '[Users] Load Fail',
}    
export class Load implements Action {
  readonly type = UsersActionTypes.Load;
}    
export class LoadSuccess implements Action {
  readonly type = UsersActionTypes.LoadSuccess;    
  constructor(public payload: Users[]) {}
}    
export class LoadFail implements Action {
  readonly type = UsersActionTypes.LoadFail;    
  constructor(public payload: string) {}
}    
export type UsersActions = Load | LoadSuccess | LoadFail;

users.effects.ts

@Injectable()
export class UsersEffects {
  constructor(private action$: Actions, private usersService: UsersService) {}

  @Effect()
  loadUsersDetails$ = this.action$.pipe(
    ofType(UsersAction.UsersActionTypes.Load),
    mergeMap((action: UsersAction.Load) =>
      this.usersService.getUsers().pipe(
        map(response => {
          if (response) {
            let users = new Array<Users>();
            console.log(response);
            .........
            return new UsersAction.LoadSuccess(users);
          }
        }),
        catchError(err => of(new UsersAction.LoadFail(err)))
      )
    )
  );
}

users.reducer.ts

export interface State extends fromRoot.State {
  users: UsersState;
}
export interface UsersState {
  users: Users[];
}
const getUsersFeatureState = createFeatureSelector<UsersState>('users');
export const getUsersDetails = createSelector(
  getUsersFeatureState,
  state => state.users
);
export const initialState: UsersState = {
  users: [],
};
export function reducer(state = initialState, action: UsersActions) {
  switch (action.type) {
    case UsersActionTypes.LoadSuccess:
      console.log('Users Reducer - Received Full Data for Users: ', action.payload);
      return {
        ...state,
        users: action.payload,
      };
    default:
      return state;
  }
}

users.module.ts

@NgModule({
  declarations: [UsersComponent],
  imports: [
    CommonModule,
    SharedModule,
    MaterialModule,
    StoreModule.forFeature('users', reducer),
    EffectsModule.forRoot([UsersEffects])
  ],
  exports: [UsersComponent],
  providers: [UsersService],
  entryComponents: [UsersComponent]
})
export class UsersModule { }

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    StoreModule.forRoot({}),
    EffectsModule.forRoot([]),
  ],
  ............
})
export class AppModule {}

我可能会缺少什么？

Answer 1

您只能拥有一个class CardViewMainAdapter(private val listMotors: ArrayList<Motor>) : RecyclerView.Adapter<CardViewMainAdapter.CardViewMainViewHolder>() { private lateinit var onItemClickCallback : OnItemClickCallback fun setOnItemClickCallback(onItemClickCallback: OnItemClickCallback){ this.onItemClickCallback = onItemClickCallback } override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CardViewMainViewHolder { val view: View = LayoutInflater.from(parent.context).inflate(R.layout.cardview_main, parent, false) return CardViewMainViewHolder(view) } override fun getItemCount(): Int { return listMotors.size } override fun onBindViewHolder(holder: CardViewMainViewHolder, position: Int) { val motor = listMotors[position] holder.cvMainName.text = motor.name Glide.with(holder.itemView.context) .load(motor.image) .apply(RequestOptions().override(350, 550)) .into(holder.cvMainImage) holder.itemView.setOnClickListener{ onItemClickCallback.onItemClicked(listMotors[holder.adapterPosition]) } } inner class CardViewMainViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView){ var cvMainImage: ImageView = itemView.findViewById(R.id.cardview_main_img) var cvMainName: TextView = itemView.findViewById(R.id.cardview_main_txt) } interface OnItemClickCallback { fun onItemClicked(data: Motor) } }，请尝试：

EffectsModule.forRoot

Angular NGRX效果一无所获

1 个答案: