NgRx pass payload through dispatch method to update store

Question

I am new to learning ngRx. I am trying to create a store which will be updated by an action from component. I am using NgRx create methods to create actions and reducers.

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>

I would like to pass payload data from dispatch method in LoadRequests() method but requestCollection does not get updated by I run LoadRequests method.

I am not sure what I am doing wrong but I am trying to create an example where I can pass data from dispatch method to actions and then to reducer to update the store.

Answer 1

There is a problem in request.component.html. You are not binding correctly.

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

Also, you are not using payload in your reducer function

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