How to dispatch an action in NgRx with parameters?

export enum ActionTypes {
  UpdateData = '[Data] Update Data',
}

export class UpdateData implements Action {
  readonly type = ActionTypes.UpdateData;

  constructor(public payload: any) {}
}

My Reducer:

export interface AppState {
  data: any;
}

const initialState: AppState = {
  data: null,
};

export function appReducer(state = initialState, action: Actions): AppState {
  switch (action.type) {
    case ActionTypes.UpdateData:
      return {
        ...state,
        data: action.payload,
      };
    default:
      return state;
  }
}

My component:

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from './app.state';
import { UpdateData } from './store/actions';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="updateData()">Update Data</button>
  `,
})
export class MyComponent {
  constructor(private store: Store<AppState>) {}

  updateData() {
    // How do I pass parameters here to the action?
    this.store.dispatch(new UpdateData(/* What to pass here? */));
  }
}

My question is, how can I pass parameters to the UpdateData action when dispatching it from the MyComponent? For example, let's say I want to update the data with a specific object or a string. How should I modify the updateData() function to achieve this?

I would greatly appreciate any insights or examples on how to handle this scenario properly. Thank you!

Since payload is typed as any you can pass everything to it, but that probably will result in an invalid state. My first tip is to make it typed.

But to answer your question:

this.store.dispatch(new UpdateData({ propertyName: parameterValue });

See https://timdeschryver.dev/blog/you-should-take-advantage-of-the-improved-ngrx-apis#actions for the "new" and improved syntax of action in NgRx.