Van-e bármilyen módon, hogy érzékeli típusú action.payload használó géppel?

szavazat
1

Van egy csomó akciók és szeretnék felismerni a fajta én hasznos teherként egy adott caseén szűkítő függően művelet típusát.

Most nem tudom, hogy mi van egy hasznos:

function someReducer(state: ISomeState = getDefaultSomeState(), action) {
    switch (action.type) {
        case FIRST: {
            // What is type of action.payload?
            return {...};
        }
        default: {
            return state;
        }
    }
}
A kérdést 02/12/2019 23:57
a forrás felhasználó
Más nyelveken...                            


1 válasz

szavazat
1

Típus Guards van géppel funkció lehetővé teszi, hogy szűkíti a típusú tárgy belül feltételes mondat. Ez azt jelenti, hogy megadhatja milyen típusú a változó körülmények alkalmazásával és kapcsolók.

Hogyan működik?

Tegyük fel, hogy van két interfész és egy objektum:

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

Adjunk hozzá néhány funkciót, a felületek

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");
}

Tehát most már tudjuk megkülönböztetni unió típusok.

Nézzük, hogyan tudjuk használni a mi alkalmazások

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;
        }
    }
}

Ha sok akció típusok nem tudja a választ ezekre a kérdésekre magabiztosan. Így tudunk segíteni géppel segítség számunkra.

Nézzük meg a fájl nyilvánításáról tetteinket:

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

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

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

És a szűkítő:

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;
        }
    }
}

Nos, ha fejleszthet géppel és Redux használja Type Gárda is. Ez minden bizonnyal időt takarít meg az Ön és csapata.

Ön is tudja olvasni a többi fejlett funkciók gépirat

Válaszolt 02/12/2019 23:57
a forrás felhasználó

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