Example with Typescript, react-redux, and redux-thunk

[jfbloom22]

So glad to see redux-thunk has great support for Typescript and Redux v4. Where is the best place to view an up to date example of a correctly typed reducer, actions, and a connected component with redux-thunk? This test is a good start: https://github.com/reduxjs/redux-thunk/blob/master/test/typescript.ts
But I can not seem to find an up to date example of what a correctly typed connected component should look like. Specifically I am looking for something that shows mapStateToProps, mapDispatchToProps, and the props interface for the component.

[timdorr]

We're planning on moving the types out of the package and into DefinitelyTyped, so this will be on the community to provide. For now, the tests will be helpful.

[jfbloom22]

@timdorr sounds great and I am looking forward to it. If the solution happens to be easy for you, the main thing I am stuck on is how to return a promise in the action.

type ThunkResult<R> = ThunkAction<R, IinitialState, undefined, any>;

export function anotherThunkAction(): ThunkResult<Promise<boolean>> {
  return (dispatch, getState) => {
    return Promise.resolve(true);
  }
}

then in my component I have a prop interface:

interface IProps {
  anotherThunkAction: typeof anotherThunkAction;
}

Then:

  componentWillMount() {
    this.props.anotherThunkAction().then(() => {console.log('hello world')})
  }

I am getting this typescript error: Property 'then' does not exist on type 'ThunkAction<Promise<boolean>, IinitialState, undefined, any>'.

FYI I am going to post this question to stack overflow as well.

[jfbloom22]

asked this on Stack overflow, but no luck so far. https://stackoverflow.com/questions/51898937/returning-a-promise-in-a-redux-thunk-with-typescript

@timdorr I know you plan to move the typing to Definitely Typed, but perhaps including an Async function in the typescript.ts tests is a good idea?

[mario-jerkovic]

@jfbloom22 Did you maybe found a solution?

[jfbloom22]

@mario-jerkovic no, I still have not found a solution. And I have not received any answers on stack overflow either. It seems strange to me that more people are not using redux-thunk with promises and typescript.
I am so disappointed by this I am considering switching away from redux-thunk to redux-saga or redux-observable. Both of those appear to have very good typescript support.

[zypher2004]

@jfbloom22 Any luck figuring this out yet or did you end up switching away from redux-thunk?

[laat]

This should work:

import { ThunkAction, ThunkDispatch } from 'redux-thunk';
import React from 'react';
import { connect } from 'react-redux';
import { Action } from 'redux';

type MyRootState = {};
type MyExtraArg = undefined;
type MyThunkResult<R> = ThunkAction<R, MyRootState, MyExtraArg, Action>;
// Next Line:
// It is important to use Action as last type argument, does not work with any.
type MyThunkDispatch = ThunkDispatch<MyRootState, MyExtraArg, Action>;

const anotherThunkAction = (): MyThunkResult<Promise<boolean>> => (dispatch, getState) => {
  return Promise.resolve(true);
};

export interface IProps {
  anotherThunkAction: () => Promise<boolean>;
}

export class Foo extends React.Component<IProps> {
  componentDidMount() {
    this.props.anotherThunkAction().then(value => {
      console.log('hello world, got', value);
    });
  }
  render() {
    return null;
  }
}

const mapDispatchToProps = (dispatch: MyThunkDispatch) => ({
  anotherThunkAction: () => dispatch(anotherThunkAction()),
});

export default connect(
  () => undefined,
  mapDispatchToProps
)(Foo);

the action type argument can also be like the test.

redux-thunk/test/typescript.ts

Line 8 in dc5fc22

type Actions = { type: 'FOO' } | { type: 'BAR', result: number };

---

Sidenote:
By swapping the calls here, we can use any as the action type. I'm creating a PR for that.

redux-thunk/index.d.ts

Line 4 in dc5fc22

<T extends A>(action: T): T;

[jfbloom22]

I was able to get this to work with @laat 's suggestion above. Thanks! But good grief this is a lot of typing. In my original question I was using "typeof" in my "Iprops" interface. This allowed me to add types to the params in my action function a single time and get the benefit of autocomplete params throughout my project.

With this implementation, I am adding types to the params 3 times. Once in the original function, once in "Iprops", and then again in "mapDispatchToProps". Is this the best we can do?

To Illustrate where I am adding types to the params 3 times:

export function testingPromise(message: string): ThunkResult<Promise<string>> {
  return (dispatch, getState) => {
    return Promise.resolve(message)
  }
}

interface IProps {
testingPromise: (message: string) => Promise<string>;
}

const mapDispatchToProps = (dispatch: MyThunkDispatch) => ({
testingPromise: (message: string) => dispatch(testingPromise(message))
})

[laat]

We can reduce the duplication a bit, with new code in the master branch.

But until @timdorr releases a new version with the types from #224, we still have to add type-definitions ourself:

src/types/redux-thunk-pr224.d.ts

// Remove when https://github.com/reduxjs/redux-thunk/pull/224 is released.
import { Dispatch } from "redux";
import { ThunkAction } from "redux-thunk";
declare module "redux" {
  function bindActionCreators<M extends ActionCreatorsMapObject<any>>(
    actionCreators: M,
    dispatch: Dispatch
  ): {
    [N in keyof M]: ReturnType<M[N]> extends ThunkAction<any, any, any, any>
      ? (...args: Parameters<M[N]>) => ReturnType<ReturnType<M[N]>>
      : M[N]
  };
}

then we can write mapDispatchToProps from the previous solution like so:

import { bindActionCreators } from "redux";

const mapDispatchToProps = (dispatch: MyDispatch) =>
  bindActionCreators({ anotherThunkAction }, dispatch);

---

The duplication of types in IProps is IMHO desired. It makes the component reusable in any context whether it is redux, react-apollo or hooks 🎉.

If you are unconcerned about coupling your components to thunks, it is possible with a utility type:

type BoundThunk<
  T extends (...args: any[]) => ThunkAction<any, any, any, any>
> = (...args: Parameters<T>) => ReturnType<ReturnType<T>>;

export interface IProps {
  // tight coupling
  anotherThunkAction: BoundThunk<typeof anotherThunkAction>;
}

[jfbloom22]

@laat this bindActionCreators() function and new types will be awesome. And thanks for the suggestion, I am going to think about how to decouple my components. In the meantime thanks for the utility type. This gives me something to use and something to study in order to upgrade my Typescript skills. It continues to be very rewarding as I learn more about Typescript and how to use it well.

[oisinlavery]

It's been some time, was this ever fixed?

[markerikson]

I've got examples of working with Redux Toolkit, thunks, and React-Redux in the Redux Toolkit "Advanced Tutorial" docs page.