C'è un modo per rilevare il tipo di action.payload usando dattiloscritto?

voti
1

Ho un sacco di azioni e voglio rilevare un tipo di mia payload in in un determinato casenella mia riduttore a seconda del tipo di azione.

Ora io non so che cosa è in un carico utile:

function someReducer(state: ISomeState = getDefaultSomeState(), action) {
    switch (action.type) {
        case FIRST: {
            // What is type of action.payload?
            return {...};
        }
        default: {
            return state;
        }
    }
}
È pubblicato 02/12/2019 alle 23:57
fonte dall'utente
In altre lingue...                            


1 risposte

voti
1

Tipo Guardie è la caratteristica dattiloscritto consente di restringere il tipo di un oggetto all'interno di un blocco condizionale. Ciò significa che è possibile specificare il tipo della variabile con le condizioni e gli interruttori.

Come funziona?

Diciamo che abbiamo due interfacce e un oggetto:

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

Aggiungiamo alcune caratteristiche per le nostre interfacce

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

Così, ora siamo in grado di differenziare i tipi di unione.

Guardiamo come possiamo usarlo nelle nostre applicazioni

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

Se si dispone di molti tipi di azione non è possibile rispondere a queste domande con fiducia. Quindi, possiamo aiutare aiuto dattiloscritto noi.

Guardiamo file di dichiarare le nostre azioni:

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

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

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

E il nostro riduttore:

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

Beh, se si sviluppano utilizzando dattiloscritto e redux, utilizzare tipo Guardie troppo. Sarà sicuramente risparmiare tempo per voi e il vostro team.

È possibile anche leggere su altre funzioni avanzate dattiloscritto

Risposto il 02/12/2019 a 23:57
fonte dall'utente

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