angular - NgRx sende nyttelast gennem dispatch-metoden for at opdatere store

Jeg er ny til at lære ngRx. Jeg forsøger at oprette en store, som vil blive opdateret af en handling fra en komponent. Jeg bruger NgRx create-metoder til at oprette handlinger og reduktionsfunktioner.

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.reducer.ts

import { UpdateRequest , LoadAllRequests, DeleteRequest } from '../actions/request.actions';
import { Request, RequestInitial } from '../models/request.model';
import {createReducer, on} from '@ngrx/store';
import { Action } from 'rxjs/internal/scheduler/Action';

// New Interface for Request State
export interface RequestState {
    requestCollection: Request[];
    request: Request;
    requestId: Request['RequestId'];
}

// Initialize Store State with Request Initial Const and empty values
export const requestInitialState: RequestState = {
    requestCollection: [],
    // requestCollection: Request[2] = [
    //   { RequestId : '1', Name : 'Test1'},
    //   { RequestId : '2', Name : 'Test2'},
    //   { RequestId : '3', Name : 'Test3'}
    // ],
    request: RequestInitial,
    requestId: '0'
};

// Create a reducer function with switch state for each action in action.ts
export const requestReducer = createReducer(
  requestInitialState,
  on(UpdateRequest, state => ({
      ...state,
      request : state.request,
  })),
  on(LoadAllRequests, (state , { requestCollection}) => ({
    ...state,
    requestCollection : state.requestCollection
     ]
  })),

);

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

request.component.html

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

Jeg vil gerne sende nyttedata fra dispatch-metoden i LoadRequests()-metoden, men requestCollection bliver ikke opdateret, når jeg kører LoadRequests-metoden.

Jeg er ikke sikker på, hvad jeg gør forkert, men jeg prøver at lave et eksempel, hvor jeg kan sende data fra dispatch-metoden til actions og derefter til reduceren for at opdatere store.

Svar #1

Der er et problem i request.component.html. Du binder ikke korrekt.

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

Derudover bruger du ikke payload i din reducer-funktion

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

Relaterede artikler