Est-il un moyen de détecter le type de action.payload en utilisant tapuscrit?

voix
1

J'ai beaucoup d'actions et je veux détecter un type de ma charge utile dans un spécifique casedans mon réducteur selon le type d'action.

Maintenant, je ne sais pas ce qui est dans une charge utile:

function someReducer(state: ISomeState = getDefaultSomeState(), action) {
    switch (action.type) {
        case FIRST: {
            // What is type of action.payload?
            return {...};
        }
        default: {
            return state;
        }
    }
}
Créé 02/12/2019 à 23:57
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
1

Type Guards est une caractéristique tapuscrit vous permet de restreindre le type d'un objet dans un bloc conditionnel. Cela signifie que vous pouvez spécifier le type de votre variable en utilisant des conditions et des commutateurs.

Comment ça marche?

Disons que nous avons deux interfaces et un objet:

interface IDog {
    woof();
}

interface ICat {
    meow();
}

const animal: IDog | ICat = getAnimal();

animal.woof(); // can we do it? ...typescript don't know because animal may be a kitten

Nous allons ajouter quelques fonctionnalités à nos interfaces

interface IDog {
    type: "Dog"; // yes, type of type is just a string literal
    woof();
}

interface ICat {
    type: "Cat";
    meow();
}

const animal: IDog | ICat = getAnimal();

switch (animal.type) {
    case "Dog":
        animal.woof(); // now we are sure that animal has woof because only Dog has this method
        return;
    case "Cat":
        animal.meow(); // typescript understands what type we are using now
        return;
    default:
        throw Error("I don't know given animal");
}

Alors, maintenant, nous pouvons différencier les types syndicaux.

Let look comment nous pouvons l'utiliser dans nos applications

function someReducer(state: ISomeState = getDefaultSomeState(), action) {
    switch (action.type) {
        case "FIRST": {
            // What is inside action.payload?
            return {...};
        }
        case "SECOND": {
            // Does action.payload have a name property?
            return {...};
        }
        default: {
            return state;
        }
    }
}

Si vous avez plusieurs types d'action vous ne pouvez pas répondre à ces questions en toute confiance. Ainsi, nous pouvons aider à nous aider tapuscrit.

look Let au fichier déclarant nos actions:

interface IFirstAction {
    type: "FIRST";
    payload: {
        name: string;
    };
}

interface ISecondAction {
    type: "SECOND";
    payload: {
        age: number;
    };
}

// we declare union type here
export type TAction =
    IFirstAction |
    ISecondAction;

Et notre réducteur:

function someReducer(state: ISomeReducerState = getDefaultSomeState(), action: TAction) {
    switch (action.type) {
        case "FIRST": {
            // What is inside action.payload?
            // Even our favourite IDE will tell us that action.payload has a name property
            // And the name is a string
            return {...};
        }
        case "SECOND": {
            // Does action.payload have a name property?
            // Nope, action.payload has an age property only
            return {...};
        }
        default: {
            return state;
        }
    }
}

Eh bien, si vous développez à l' aide tapuscrit et Redux, utilisez gardes type aussi. Il va certainement gagner du temps pour vous et votre équipe.

Vous pouvez également lire sur d' autres caractéristiques de pointe tapuscrit

Créé 02/12/2019 à 23:57
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more