TypeScript type for the result of dispatching a createAsyncThunk

Thanks for an awesome library!

I asked on SO but wasn’t able to get a definitive answer around this. I’ve also seen a few similar issues here but I’m using the connect API instead of the useDispatch hook which most of those examples use. Given the code below, what should the type be for my loadAction so that TS knows this is a promise and that it has a type property.

interface ApiResponse {
  data: string;
}

interface ApiErrorResponse {
  message: string;
}

const api = () =>
  new Promise<ApiResponse>((resolve) => {
    resolve({ data: "123" });
  });

const loadSomething = createAsyncThunk<
  string,
  void,
  { rejectValue: ApiErrorResponse }
>("something", async (_, { rejectWithValue }) => {
  try {
    const result = await api();
    return result.data;
  } catch (err) {
    if (!err.response) throw err;

    return rejectWithValue(err.data as ApiErrorResponse);
  }
});

const List = ({ data = "Something", loadAction }: ListProps) => {
  React.useEffect(() => {
    const fetchData = async () => {
      const result = await loadAction();
      if (result.type.endsWith("rejected")) alert("Failed");
    };
    fetchData();
  }, [loadAction]);

  return <div>#{data}</div>;
};

interface DispatchProps {
  loadAction: () => AsyncThunkAction<string, void, {}>; //This doesn't work so what type should this be?
}

interface OwnProps {
  data?: string;
}

type ListProps = DispatchProps & OwnProps;

const mapDispatch = {
  loadAction: loadSomething
};

const ListContainer = connect<void, DispatchProps, OwnProps, {}>(
  null,
  mapDispatch
)(List);

[markerikson]

or, y’know, ({asyncThunk}: PropsFromRedux) => { 😃

[hoffmanilya]

@msutkowski thanks for the advice! I’ll give the useDispatch route a try.