Getting TS error with Redux dispatch action, `Property does not exist on type`

user_2891356 0
Viewed 481

I have the following redux-thunk action:

import { Action } from "redux";
import { ThunkAction as ReduxThunkAction } from "redux-thunk";
import { IState } from "./store";

type TThunkAction = ReduxThunkAction<void, IState, unknown, Action<string>>;

export type TReturnValue = { someString: string };
export const someAction = (): TThunkAction => (dispatch): TReturnValue => ({
  someString: "some value"
});

And I dispatch the action like this:

const { someString } = dispatch(someAction());

which throws the error,

const { someString } = dispatch(someAction());
        ^^^^^^^^^^
Property 'someString' does not exist on type 'TThunkAction<void, IState, unknown, Action<string>>'

I've tried casting the result like this,

const { someString } = dispatch<TReturnValue>(someAction());

And I've tried redefining TThunkAction, but nothing worked.

How can I get Typescript to know what type to expect from the dispatch action?

gracious-yalow-essnz?

typescript reactjs javascript
2 Answers

I don't think dispatch() returns anything. Dispatch is just to send the action to the reducers where you would read the payload of the actions.

If you need a value from your thunk you should fire a new action inside the thunk and handle that it in the reducer.

To read the value in your react component you should also be using useSelector to read specific values from your state.

Would be easier to explain if I knew what you where trying to do with the value.

Take a look at redux with typescript.
Or consider Redux toolkit for less boilerplate code with Typescript.

user_22805740

You can add the fix that @Linda Paiste linked to in the comments manually, I added it and got the correct solution.

In actions.ts, I fixed the ReduxThunkAction to have the correct value and added the Dispatch type from the patch.

type ThunkAction<ReturnType> = ReduxThunkAction<
  ReturnType,
  IState,
  unknown,
  Action<string>
>;

export type TReturnValue = { someString: string };
export type TAnotherReturnValue = { anotherString: string };

export const someAction = (): ThunkAction<TReturnValue> => (dispatch) => ({
  someString: "some value"
});
export const anotherAction = (): ThunkAction<TAnotherReturnValue> => (
  dispatch
) => ({
  anotherString: "another value"
});

export interface Dispatch<A extends Action = AnyAction> {
  <TReturnType = any, TState = any, TExtraThunkArg = any>(
    thunkAction: ReduxThunkAction<TReturnType, TState, TExtraThunkArg, A>
  ): TReturnType;
}

In app.tsx, I just force the dispatch type to be the new manually added thunk type.

  const dispatch: Dispatch = useDispatch();

See code sandbox:

https://codesandbox.io/s/holy-field-vujrq?file=/src/App.tsx

EDIT: Answered the comment by making the ThunkAction helper as generic. The main point about this is to remember that the helper is just a helper and you could also just type each action separately as a ReduxThunkAction, the helper just saves some keystrokes and ensures consistency.

user_953690
Related