score:0

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.

score:3

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.


Related Query

More Query from same tag