Как отправить полезную нагрузку при отправке действия в Angular-redux с Angular 5+

Как отправить полезную нагрузку при отправке действия в angular-redux? Я не могу найти это нигде объясненным, ни в официальных учебниках, ни в API-документах.

У класса 'Action' есть свойство 'type', но нет свойства 'payload'.

Документы API: https://angular-redux.github.io/store/

Источник

1 ответ

Мой подход с этим был похож на @user1337, но с немного большим контролем типов:

redux-actions / assign.ts

import { Action } from '@ngrx/store';

export enum ActionTypes {
  SetStartTime = 'Set Start Time',
  SetEndTime = 'Set End Time'
}

interface SetStartTime extends Action {
  readonly type: ActionTypes;
  readonly startTime: Date;
}

interface SetEndTime extends Action {
  readonly type: ActionTypes;
  readonly endTime: Date;
}

export interface AppointmentActions extends
  SetStartTime,
  SetEndTime {}

export function setStartTime(startTime: Date): SetStartTime {
  return {
    type: ActionTypes.SetStartTime,
    startTime
  };
}

export function setEndTime(endTime: Date): SetEndTime {
  return {
    type: ActionTypes.SetStartTime,
    endTime
  };
}

редукторы / assign.ts

import { ActionTypes, AppointmentActions } from '../redux-actions/appointment.ts';


interface AppointmentState {
  startTime: Date;
  endTime: Date;
}

export const initialState: AppointmentState = {
  startTime: null,
  endTime: null
};

export function appointmentReducer(state = initialState, action: AppointmentActions): AppointmentState {
  switch (action.type) {
    case ActionTypes.SetStartTime:
      return {
        ...state,
        startTime: action.startTime
      };

    case ActionTypes.SetEndTime:
      return {
        ...state,
        endTime: action.endTime
      };

    default:
      return state;
  }
}

Это решение делает так, что теперь у вас есть доступ к типу и intellisense как в редукторе, так и в действии redux.

Итак, теперь отправим действие redux:assign.component.ts

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { appointmentReducer as appointment } from '../reducers/appointment';
import { setStartTime, setEndTime } from '../redux-actions/appointment';

@Component({
  selector: 'app-appointment-component',
  templateUrl: './appointment.component.html',
  styleUrls: ['./appointment.component.css'],
})
export class AppointmentComponent {
  ....
  constructor(private store: Store<{ appointment }>) {
    ...
  }

  setStartTime(startTime: Date) {
    this.store.dispatch(setStartTime(startTime);
  }
}
Источник

То, что я сделал сейчас, вместо создания действий типа Action, я создал действия типа AnyAction.

AnyAction расширяет Action и имеет дополнительное свойство extraProps:

export interface AnyAction extends Action {
  // Allows any extra properties to be defined in an action.
  [extraProps: string]: any;
}

Так что теперь я могу добавить полезную нагрузку в мое объявление действия:

myAction(payload: any): AnyAction {
    return { type: MyActions.MY_ACTION, extraProps: payload };
}

И теперь я могу вызвать диспетчеризацию с полезной нагрузкой в ​​качестве параметра:

this.ngRedux.dispatch(this.myActions.myAction(payload));

И использовать его в моем магазине:

case MyActions.MY_ACTION: {
    // payload
    let payload = action['extraProps'];
}

Но является ли это правильным способом отправки полезной нагрузки с действием в angular-redux?

Источник
Другие вопросы по тегам