reactjs - Hoe toegang krijgen tot een asynchrone functie vanuit een Redux Action die is doorgegeven aan Redux Thunk?

Ik probeer code te refactoren van Javascript React naar Typescript React.

Ik heb hier een actie die een API-aanroep uitvoert en een functie retourneert met dispatch

Mijn UserActions.ts bestand ziet er zo uit

export const login = ({username, password}) => async (dispatch: any) => {
  try {

    let r = await apiCall(); //performing api call here

    return r.code; //returning the custom responseCode here from my server

    console.log(auth)
  } catch (err) {
    throw new Error(err);
  }
}

In mijn componentbestand MyComponent.ts is er een lidfunctie voor de componentklasse

public formSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        const { password, email } = this.state;

        this.props.login({
            email,
            password,
        }).then(responseCode => {
                //I want to access responseCode here
        });
}

De verbinding met Redux ziet er zo uit in MyComponent.ts

const mapStateToProps = (store: IAppState) => {
    return {

    }
}

export default connect(mapStateToProps, {
    login
})(SignIn);

Dus, zoals je kunt zien, geeft de login eigenlijk een functie terug die wordt doorgegeven aan Redux Thunk Middleware en vervolgens wordt doorgegeven in this.props aan MyComponent

Om toegang te krijgen tot de retourvariabele van een functie, moet ik de buitenste functie typen in de loginactie UserActions.ts.

Dus hoe krijg ik toegang met de juiste types? Omdat TypeScript me niet toestaat om this.props.login().then() in MyComponent.ts te zetten

Antwoord #1

De beste praktijk is om een actie te versturen en de gegevens in de reducer te plaatsen. Probeer te voorkomen dat gegevens terug worden gegeven vanuit asynchrone functies. Je kunt een AuthReducer hebben en de gegevens bijwerken en deze direct in de component gebruiken.

export const login = ({username, password}) => async (dispatch: any) => {
    let r = await apiCall(); //performing api call here
    dispatch({ type: 'UPDATE_AUTH', payload: auth })
}

en in je reducer

case 'UPDATE_AUTH':
 return { ...state, ...action.payload }

en in je component

const mapStateToProps = ({ auth }) => ({ auth })

export default connect(mapStateToProps, {
    login
})(SignIn);

Antwoord #2

Ik kende de echte Typescript-manier om het te doen niet, dus ik heb de any-workaround gebruikt

In plaats van te doen

this.props.login({
            email,
            password,
        }).then(responseCode => {
                //I want to access responseCode here
        });

Je kunt gewoon doen

const responseCode:any = await this.props.login({email, password});

Typescript controleert hier await en ik cast het geretourneerde object naar any en in runtime wordt de werkelijke responseCode geretourneerd van Redux Thunk