Typescript Redux Thunk (Types)

Question

I have a redux thunk action that fetches some data and then dispatches some actions (not shown in the code here, but you'll be able to find it in the demo link bellow)

export const fetchPosts = (id: string) => (dispatch: Dispatch<TActions>) => {
    return fetch('http://example.com').then(
    response => {
        return response.json().then(json => {
        return "Success message";
        });
    },
    err => {
        throw err;
    }
    );
};

and than in my component I use mapDispatchToProps with bindActionCreators to call this function from my component like so:

public fetchFunc() {
    this.props.fetchPosts("test").then(
        res => {
        console.log("Res from app", res);
        },
        err => {
        console.log("Err from app", err);
        }
    );
}

Since I am using typescript, I need to define the type of this function in the Props

interface IProps {
    name?: string;
    posts: IPost[];
    loading: boolean;
    fetchPosts: (id: string) => Promise<string | Error>;
}

If I do-it like above, Typescript will complain that I should do-it like this:

fetchPosts: (id: string) => (dispatch: Dispatch<TActions>) => Promise<string | Error>; 

If I do-it like this, then Typescript complains when I use then in my component saying that that function is not a promise.

I created a demo where you can fiddle with the code

Pressing "Load from remote" will sometimes fail just to see if the promise:

https://codesandbox.io/s/v818xwl670

Answer 1

The problem is the call to bindActionCreators in mapDispatchToProps . At runtime bindActionCreators basically transforms this (id: string) => (dispatch: Dispatch<TActions>) => Promise<string>; into this (id: string) => Promise<string>; , but the type for bindActionCreators does not reflect this transformation. This is probably due to the fact that to accomplish this you would need conditional types which until recently were not available.

If we look at this sample usage from the redux repo, we see that they accomplish the transformation by specifying the types of the functions explicitly:

const boundAddTodoViaThunk = bindActionCreators<
  ActionCreator<AddTodoThunk>,
  ActionCreator<AddTodoAction>
>(addTodoViaThunk, dispatch)

We could do the same in your code, referencing existing types, but this hurts type safety as there is no check that fetchPosts in the two types will be correctly typed:

const mapDispatchToProps = (dispatch: Dispatch<TActions>): Partial<IProps> =>
  bindActionCreators<{ fetchPosts: typeof fetchPosts }, Pick<IProps, 'fetchPosts'>>(
    {
      fetchPosts
    },
    dispatch
  );

Or we could use a type assertion since the above method does not really offer any safety anyway:

const mapDispatchToProps2 = (dispatch: Dispatch<TActions>) =>
    bindActionCreators({ 
      fetchPosts: fetchPosts as any as ((id: string) => Promise<string>) 
    }, dispatch ); 

For a truly type safe way to do this we need to use typescript 2.8 and conditional types with a helper function. We can type bindActionCreators the way it should, and automatically infer the correct type for the resulting creators:

function mybindActionCreators<M extends ActionCreatorsMapObject>(map: M, dispatch: Dispatch<TActions>) {
  return bindActionCreators<M, { [P in keyof M] : RemoveDispatch<M[P]> }>(map, dispatch);
}
const mapDispatchToProps = (dispatch: Dispatch<TActions>) =>
  mybindActionCreators(
    {
      fetchPosts
    },
    dispatch
  );

// Helpers
type IsValidArg<T> = T extends object ? keyof T extends never ? false : true : true;

type RemoveDispatch<T extends Function> =
  T extends (a: infer A, b: infer B, c: infer C, d: infer D, e: infer E, f: infer F, g: infer G, h: infer H, i: infer I, j: infer J) => (dispatch: Dispatch<any>) => infer R ? (
    IsValidArg<J> extends true ? (a: A, b: B, c: C, d: D, e: E, f: F, g: G, h: H, i: I, j: J) => R :
    IsValidArg<I> extends true ? (a: A, b: B, c: C, d: D, e: E, f: F, g: G, h: H, i: I) => R :
    IsValidArg<H> extends true ? (a: A, b: B, c: C, d: D, e: E, f: F, g: G, h: H) => R :
    IsValidArg<G> extends true ? (a: A, b: B, c: C, d: D, e: E, f: F, g: G) => R :
    IsValidArg<F> extends true ? (a: A, b: B, c: C, d: D, e: E, f: F) => R :
    IsValidArg<E> extends true ? (a: A, b: B, c: C, d: D, e: E) => R :
    IsValidArg<D> extends true ? (a: A, b: B, c: C, d: D) => R :
    IsValidArg<C> extends true ? (a: A, b: B, c: C) => R :
    IsValidArg<B> extends true ? (a: A, b: B) => R :
    IsValidArg<A> extends true ? (a: A) => R :
    () => R
  ) : T;

Answer 2

Basically, in Typescript, the generic type of the promise will be inferred from the resolve only.

For example

function asyncFunction() {
    return new Promise((resolve, reject) => {
       const a = new Foo();
       resolve(a);
    })
}

asynFunction return type will be inferred as Promise<Foo>

You just only need to remove Error as a union type in your type to get the proper type definition:

fetchPosts: (id: string) => (dispatch: Dispatch<TActions>) => Promise<string>;

Answer 3

Thank you @Thai Duong Tran and @Titian Cernicova-Dragomir.

I've found a mix between the two answers you provided.

1:

In the props, instead of redeclaring all argument types and return types, I can say that the function has the typeof the original function as so: fetchPosts: typeof fetchPosts (Thanks to @titian-cernicova-dragomir)

2:

Now I can use that function, but not as a promise. to make that work as a promise, I can use the solution provided by @thai-duong-tran.

const fetchPromise = new Promise(resolve => {
    this.props.fetchPosts("adidas");
});

You can see the working demo here: https://codesandbox.io/s/zo15pj633

Answer 4

请尝试以下操作：

fetchPosts: (id: string) => void;