I'm actually migrating some code to typescript so I'm new in all this type stuff. When I used redux-thunk with regular javascript the dispatch method returned a promise that helped me to handle errors and stuff. The action was this one:
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};
}
};
};
Then I called normally using the useDispatch hook:
const dispatch = useDispatch();
...
dispatch(login({username: "admin", password: "adminpassword1"}))
.then(d => console.log("ok"))
.catch(err => console.log(err));
Now that I migrated the code to typescript, the action now looks like this:
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};
}
}
}
This is executed without problems, but if I try to handle this:
dispatch(login({username: "admin", password: "adminpassword1"}))
.then(d => console.log("ok"))
.catch(err => console.log(err));
I get this error:
TS2339: Property 'then' does not exist on type 'ThunkAction >, {}, {}, AnyAction>'
I tried to read the section about types in Redux but I cannot find the correct way to declare this dispatch function to work as I need it.
https://redux.js.org/recipes/usage-with-typescript
What's worse is that I'm getting this runtime error after the action is execute:
Possible Unhandled Promise Rejection (id: 0):
So the promise is somewhere.