web-dev-qa-db-fra.com

La propriété 'payload' n'existe pas sur le type 'Action' lors de la mise à niveau de @ ngrx / Store

J'ai le @ngrx/store package dans mon angular (4.x) et mise à niveau depuis v 2.2.2 -> v 4.0. Je peux voir que les notes de migration disent:

La propriété de charge utile a été supprimée de l'interface Action.

Cependant, l'exemple qu'ils donnent semble complètement contre-intuitif (à mon avis ...).

J'ai une fonction de réduction qui ressemble à ceci:

export function titleReducer(state = { company: 'MyCo', site: 'London' }, action: Action): ITitle {
    switch (action.type) {
        case 'SET_TITLE':
            return {
                company: action.payload.company,
                site: action.payload.site,
                department: action.payload.department,
                line: action.payload.line
            }
        case 'RESET':
            return {
                company: 'MyCo',
                site: 'London'
            }
        default:
            return state
    }
}

Ce qui, comme prévu, génère maintenant une erreur TypeScript:

[ts] La propriété 'payload' n'existe pas sur le type 'Action'

Mais je n'ai aucune idée du guide de migration sur ce que cela devrait aussi changer. Des idées?

angulartypescriptngrxngrx-store
12
George Edwards

Vous pouvez créer votre propre type d'action qui a un payload défini, vérifiez l'exemple d'application pour référence:

class AddBookAction implements Action {
    readonly type = ADD_BOOK;

    constructor(public payload: Book) {}
}

Utilisez ensuite ce type dans le réducteur :

function reducer(state = initialState, action: AddBookAction): State

L'action pourrait être envoyée comme this :

this.store.dispatch(new AddBookAction(book));

Notez également que l'exemple d'application combine tous les types d'actions qu'un réducteur peut prendre en un seul type d'union:

export type Actions =
    | AddBookAction
    | AddBookSuccessAction

export function reducer(state = initialState, action: Actions): State
18
Sergey Karavaev

Ok, c'est un sujet très intéressant. J'ai raté de nouveaux realese (4.0) mais j'ai mis à jour les bibliothèques dans mon repo et j'ai vu que j'ai le même problème.

C'est vrai. L'attribut de charge utile a été supprimé d'Action dans la nouvelle version. Si vous utilisez des effets pour répartir l'action, la solution est simple et pouvez-vous les lire dans note de migration

mais si vous voulez que la répartition transmette la charge utile, vous pouvez créer une action paramétrée de cette manière:

export interface ActionWithPayload<T> extends Action {
  payload: T;
}

donc si vous avez ajouté cette interface, vous pouvez changer le réducteur de cette façon:

export class SomeObject {
    company: string;
    site: string;
    department: string;
    line: string;
}

export function titleReducer(state = { company: 'MyCo', site: 'London' }, action: ActionWithPayload<SomeObject>): ITitle {
    switch (action.type) {
        case 'SET_TITLE':
            return {
                company: action.payload.company,
                site: action.payload.site,
                department: action.payload.department,
                line: action.payload.line
            }
            ...

C'est le meilleur walkaround, ce que j'ai trouvé. Je dois mieux comprendre la raison de ce changement, et si je trouve une meilleure soulution je les ai ajoutées ici

6
Jaroslaw K.

J'ai également trouvé cette approche utile: pour importer l'interface Action d'origine avec la clause as et l'étendre avec une propriété payload.

Dans ce cas, aucune modification du reste du code n'est nécessaire: https://blog.dmbcllc.com/upgrade-ngrx-4-x/ .

0
Peter Kassenaar