reactjs - Redux handlingstype på action, når man bruger dispatch og getState


Jeg har problemer med at finde ud af, hvad returtypen skal være for min handling. Alting fungerer, mens jeg bruger any, men jeg prøver at undgå at bruge any.

export const saveValue = (value: number): any => {
    return (dispatch: Dispatch<SaveValue>, getState: () => State): void => {
        axios.post('www.exampleurl.com', value)
            .then((response) => {
                const someValueFromState = getState().stateValue;
                const payload = {...response, someValueFromState}
                dispatch({ type: constants.SAVE_VALUE, payload });
            });
    };
};

Jeg havde det til at fungere før, da handlingen ikke brugte getState(), og det så sådan ud, hvor det returnerede Dispatch<SaveValue>:

export const saveValue = (value: number): Dispatch<SaveValue> => {
    return (dispatch: Dispatch<SaveValue>): void => {
        axios.post('www.exampleurl.com', value)
            .then((response) => {
                dispatch({ type: constants.SAVE_VALUE, response });
            });
    };
};

Men når jeg først tilføjede getState, er jeg ikke sikker på, hvad jeg skal gøre længere. Jeg har forsøgt at lægge returværdien i en variabel og kan se, at objektet, jeg opretter, er const myAttempt: (dispatch: Dispatch<SaveValue>, getState:() => State) => void, men når jeg prøvede at bruge det som følger, virker det ikke:

export const saveValue = (value: number): (dispatch: Dispatch<SaveValue>, getState: () => StoreState) => void => {
    return (dispatch: Dispatch<SaveValue>, getState: () => State): void => {
        axios.post('www.exampleurl.com', value)
            .then((response) => {
                const someValueFromState = getState().stateValue;
                const payload = {...response, someValueFromState}
                dispatch({ type: constants.SAVE_VALUE, payload });
            });
    };
};

Når jeg gør dette, får jeg en fejl: En funktion, hvis erklærede type hverken er 'void' eller 'any', skal returnere en værdi.

REDIGER :

Bare for at tilføje, jeg kan ikke returnere Dispatch<SaveValue> som jeg gjorde før, ellers får jeg denne fejl: Type '(dispatch: Dispatch<SaveValue>, getState:() => State) => void' er ikke tildelbar til type 'Dispatch<SaveValue>'

Svar #1

En ven hjalp mig med at svare på dette. Dette var den rigtige måde at gøre det på:

export const saveValue = (value: number): (dispatch: Dispatch<SaveValue>, getState: () => State): void => {
    return (dispatch: Dispatch<SaveValue>, getState: () => State): void => {
        axios.post('www.exampleurl.com', value)
            .then((response) => {
                const someValueFromState = getState().stateValue;
                const payload = {...response, someValueFromState}
                dispatch({ type: constants.SAVE_VALUE, payload });
            });
    };
};

Problemet jeg havde var med min mapDispatchToProps-funktion, som blev eksplicit typet og forårsagede fejlen Type '(dispatch: Dispatch<SaveVisit>, getState:() => StoreState) => void' is not assignable to type 'Dispatch<SaveVisit>'. Funktionen var:

interface MapDispatchToPropsInterface {
    saveValue : (value: number) => Dispatch<SaveValue>;
}

const mapDispatchToProps: MapDispatchToPropsInterface = {
    saveValue : ActionCreators.saveValue,
};

men grænsefladen skulle være:

interface MapDispatchToPropsInterface {
    saveValue : (saveDetails: CheckedVisit) =>  (dispatch: Dispatch<SaveValue>, getState: () => StoreState) => void;
}

Svar #2

Konfigurer først følgende i din butik:

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

brug derefter de tidligere brugerdefinerede typer i din funktion

export const getUserRolUid = () => {
    return async (dispatch: AppDispatch, getState: ()=> RootState) => {

      const { uid } = getState().auth;
      const user = await loadUser(uid);
      
      if (user) {
        // update the role and send the data to redux
        dispatch(getUser(user));
      } else {
        dispatch(getUserRolUid());
      }
    };
  }

Relaterede artikler