redux-actions createAction standardparametere i payloadCreator-funksjonen (TypeScript)
hvis jeg genererer en handling som dette:
export const updateParticularObjectValue = createAction(
UPDATE_PARTICULAR_VALUE,
(id: string, amount: number, reason: string = 'default') => {
return { id, value: amount, reason };
},
);
Av en eller annen grunn klager IDE-en min (og faktisk TypeScript-kompilatoren min) på at når jeg kaller action creator, forventes kun to argumenter når jeg passerer det tredje eksplisitt. Jeg vil at creatoren skal kunne ta det tredje argumentet valgfritt... er det en måte å gjøre dette på ved å bruke redux-actions createAction-funksjonen, eller må jeg lage action creatoren manuelt?
P.S. -- denne syntaksen gir også samme resultat:
export const updateParticularObjectValue = createAction(
UPDATE_PARTICULAR_VALUE,
(id: string, amount: number, reason?: string) => {
return { id, value: amount, reason: reason || 'default' };
},
);
ser ut som om å gjøre det tredje argumentet valgfritt på noen måte ikke oversettes i TypeScript -- det blir behandlet som ikke-eksisterende, og kall til funksjonen forbyr å inkludere det. Er det en måte å omgå dette på?
P.P.S. -- hvis du kan 'lure' TypeScript-kompilatoren (i mitt tilfelle ved å definere funksjonsgrensesnittet i en komponentens Props-type når du bruker 'connect' i en React-komponent), fungerer det fint, det bare passerer ikke kompilatorens luktesans-test når du kaller det eksplisitt -- ser ut til at det egentlig ikke er noen grunn til at dette skal skje.
P.P.P.S. -- på dette tidspunktet har jeg funnet en fungerende løsning. Jeg er imidlertid fortsatt interessert i hvorfor dette er en begrensning i createAction sin TypeScript-implementering, og om det finnes noen alternative løsninger som ville vært bedre/klokere for denne situasjonen. En god forklaring ville være lærerik for meg selv og sannsynligvis for andre.
Svar #1
Du kan gjøre noe slik, ved å bruke en piltastfunksjon return createAction funksjon:
interface ActionProps {
id: string;
amount: number;
reason: string;
}
export const updateParticularObjectValue = (props: ActionProps) => (createAction('UPDATE_PARTICULAR_VALUE', {
id: props.id,
value: props.amount,
reason: props.reason
}));
Svar #2
Så basert på @FisNaN sitt opprinnelige svar, ser det ut til at den reneste løsningen er å pakke handlingsskaperen inn i en beholderfunksjon og la selve handlingsskaperen vurdere alle innganger som obligatoriske, f.eks.:
// allow a default
export const updateObjectValue = (id: string, amount: number, reason: string = 'default') => {
return updateObjectValueWithReason(id, amount, reason);
}
// do it for real
const updateObjectValueWithReason = createAction(
UPDATE_PARTICULAR_VALUE,
(id: string, amount: number, reason: string) => {
return { id, value: amount, reason };
},
);
hvis du virkelig trenger at reduseren din skal bestemme standardverdien, kan du alltid lage to aksjonsopprettere og la wrapperen din velge hvilken som skal utløses:
// allow a default
export const updateObjectValue = (id: string, amount: number, reason?: string) => {
return typeof reason === 'undefined'
? updateObjectValueWithoutReason(id, amount)
: updateObjectValueWithReason(id, amount, reason);
}
// take a reason and send it through the action
const updateObjectValueWithReason = createAction(
UPDATE_PARTICULAR_VALUE,
(id: string, amount: number, reason: string) => {
return { id, value: amount, reason };
},
);
// send no reason through the action, let reducer decide
const updateObjectValueWithoutReason = createAction(
UPDATE_PARTICULAR_VALUE,
(id: string, amount: number) => {
return { id, value: amount };
},
);
Jeg er fortsatt ikke 100 % sikker på hvorfor typen som returneres av createAction-funksjonen i TypeScript utelater valgfrie parametere helt, men denne metoden bør tillate deg å bruke valgfrie parametere slik du ønsker i dine actionCreators.
