Dispatch nu returnează o promisiune folosind redux-thunk cu typescript

De fapt, migrez niște cod la TypeScript, așa că sunt nou în toate lucrurile astea legate de tipuri. Când foloseam redux-thunk cu JavaScript obișnuit, metoda dispatch returna o promisiune care mă ajuta să gestionez erorile și alte lucruri. Acțiunea era aceasta:

export const login = ({email, password}) => {
    return async function (dispatch) {
        try {
            const result = await api.post(`/auth/login`, {username, password});
            return dispatch({type: 'set_user_session', payload: result.data});
        } catch (err) {
            throw (err.response && err.response.data) || {code: err};
        }
    };
};

Apoi am sunat normal folosind hook-ul useDispatch:

const dispatch = useDispatch();
...
dispatch(login({username: "admin", password: "adminpassword1"}))
    .then(d => console.log("ok"))
    .catch(err => console.log(err));

Acum că am migrat codul la TypeScript, acțiunea arată acum așa:

export const login = ({username, password}: Credentials): ThunkAction<Promise<Action>, {}, {}, AnyAction> => {
    // Invoke API
    return async (dispatch: ThunkDispatch<{}, {}, AnyAction>): Promise<Action> => {
        try {
            const result = await api.post(`/auth/login`, {username, password});
            return dispatch({type: 'set_user_session', payload: result.data});
        } catch (err) {
            console.log(err);
            throw (err.response && err.response.data) || {code: err};
        }
    }
}

Acest lucru este executat fără probleme, dar dacă încerc să gestionez asta:

dispatch(login({username: "admin", password: "adminpassword1"}))
    .then(d => console.log("ok"))
    .catch(err => console.log(err));

Primesc această eroare:

TS2339: Property 'then' does not exist on type 'ThunkAction   >, {}, {}, AnyAction>'

Am încercat să citesc secțiunea despre tipuri în Redux, dar nu pot găsi modul corect de a declara această funcție dispatch pentru a funcționa așa cum am nevoie.

https://redux.js.org/recipes/usage-with-typescript

Ce este și mai rău este că primesc această eroare de rulare după ce acțiunea este executată:

Possible Unhandled Promise Rejection (id: 0):

Deci promisiunea este undeva.

Răspuns #1

Tipul de bază Dispatch nu cunoaște thunk-urile. Trebuie să deduci tipul modificat al store.dispatch care spune lui TS că thunk-urile sunt acceptabile, și atunci va înțelege că trimiterea thunk-ului returnează de fapt o promisiune.

Cea mai bună opțiune aici este să trecem la utilizarea pachetului nostru oficial Redux Toolkit și să deducem tipul store.dispatch așa cum este arătat aici:

https://redux-toolkit.js.org/tutorials/typescript

Apoi, poți folosi acel tip Dispatch îmbunătățit cu hook-ul useDispatch.

(Pentru ce merită, refacerea paginii de documentație principală Redux „Utilizare cu TS” este pe lista mea de lucruri de făcut pentru viitorul apropiat)