Angular NgRx通过分派方法传递有效负载以更新存储

我是学习ngRx的新手。我正在尝试创建一个存储，该存储将由来自组件的操作更新。我正在使用NgRx创建方法创建动作和减缩器

request.Component.ts

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Request } from '../models/request.model';
import { RequestState } from '../reducers/request.reducer';
import { Observable } from 'rxjs';
import { UpdateRequest , LoadAllRequests, DeleteRequest } from '../actions/request.actions';

@Component({
  selector: 'app-request',
  templateUrl: './request.component.html',
  styleUrls: ['./request.component.css'],
})

export class RequestComponent {
  request$: Observable<RequestState>;
  requestList =  Request[2] = [
    { RequestId : '1', Name : 'Test1'},
    { RequestId : '2', Name : 'Test2'},
    { RequestId : '3', Name : 'Test3'}
  ];

  constructor(private store: Store<{ request: RequestState }>) {
    this.request$ = store.pipe(select('request'));
  }

  UpdateRequest() {
    this.store.dispatch(UpdateRequest({request : this.requestList[0]}));
  }

  LoadRequests() {
    this.store.dispatch(LoadAllRequests({requestCollection: this.requestList}));
  }

  DeleteRequest() {
    this.store.dispatch(DeleteRequest({requestID : this.requestList[0].RequestId}));
  }
}

request.actions.ts

import {createAction, props} from '@ngrx/store';
import { Request } from '../models/request.model';

export const UpdateRequest = createAction(
  '[Request] UpdateRequest',
  props<{request: Request}>()
);
export const LoadAllRequests = createAction(
    '[Request] LoadAllRequests',
    props<{requestCollection: Request[]}>()
);
export const DeleteRequest = createAction(
    '[Request] DeleteRequest',
    props<{requestID: Request['RequestId']}>()
);
export const loadRequestFailure = createAction(
  '[Request] ErrorRequest',
  props<{error: any}>()
);

从'@ngrx/store'导入{createAction，props}；
从“../models/Request.model”导入{Request}；
export const UpdateRequest=createAction(
“[请求]更新请求”，
道具（）
);
export const LoadAllRequests=createAction(
“[Request]LoadAllRequests”，
道具（）
);
export const DeleteRequest=createAction(
“[请求]删除请求”，
道具（）
);
export const loadRequestFailure=createAction(
“[Request]ErrorRequest”，
道具（）
);

request.component.html

<button click="LoadRequests()">Load All Requests</button>

加载所有请求

我想从LoadRequests（）方法中的dispatch方法传递有效负载数据，但我运行LoadRequests方法不会更新requestCollection

---

我不确定我做错了什么，但我正在尝试创建一个示例，在该示例中，我可以将数据从dispatch方法传递到actions，然后传递到reducer以更新存储。

request.component.html中存在问题。您没有正确绑定

<button (click) ="LoadRequests()">Load All Requests</button>

---

非常感谢你！

<button (click) ="LoadRequests()">Load All Requests</button>

  on(LoadAllRequests, (state , { requestCollection }) => ({
    ...state,
    requestCollection : requestCollection
  })),