Can't dispatch another action inside action with typescript

This is what redux has for action and type is mandatory. Are we trying to prevent dispatching action in another action? if not then this is a bug because when I need to dispatch another action I don’t have a type or payload is just calling another action.

`/**

• An action is a plain object that represents an intention to change the
• state. Actions are the only way to get data into the store. Any data,
• whether from UI events, network callbacks, or other sources such as
• WebSockets needs to eventually be dispatched as actions.
• Actions must have a type field that indicates the type of action being
• performed. Types can be defined as constants and imported from another
• module. It’s better to use strings for type than Symbols because strings
• are serializable.
• Other than type, the structure of an action object is really up to you.
• If you’re interested, check out Flux Standard Action for recommendations on
• how actions should be constructed.
• @template T the type of the action’s type tag. */ export interface Action<T = any> { type: T }`

My code:

export const getDiagnostics = () => async (
  dispatch: Dispatch<VehicleAction | (dispatch: Dispatch<VehicleAction>) => Promise<void>>
): Promise<void> => {
  return axios
    .post(
      process.env.REACT_APP_ENDPOINT,
      {
        diagnosticsRequest: {
        },
      },
      {
        headers: {
          Authorization: 'Bearer ' + store.getState().auth.token,
        },
      }
    )
    .then((response) => {
      if (response.data.status === 'inProgress') {
        dispatch(
          getRequest(
            response.data.url,
            SET_DIAGNOSTICS_STATUS,
            SET_DIAGNOSTICS
          )
        );
      }
    })
    .catch((error) => {
      dispatch({
        type: SET_DIAGNOSTICS_STATUS,
        payload: 'failure',
      });
    });
};

TypeScript Error

Type 'VehicleAction | ((dispatch: Dispatch<InVehicleAction>) => Promise<void>)' does not satisfy the constraint 'Action<any>'.
  Property 'type' is missing in type '(dispatch: Dispatch<VehicleAction>) => Promise<void>' but required in type 'Action<any>'.ts(2344)
index.d.ts(21, 3): 'type' is declared here.

Environment Details

"@types/node": "^12.20.4",
"@types/react": "^17.0.2",
"@types/react-dom": "^17.0.1",
"@types/react-redux": "^7.1.16",
"@types/react-router-dom": "^5.1.7",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-error-boundary": "^3.1.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0"

[phryneas]

@antoscarface @markerikson from what I see this has nothing to do with the initial topic of this issue (dispatching a thunk from within a thunk), but is the “redux 4.0.5 and 4.1.0 installed next to each other cause AppDispatch to become Dispatch<AnyAction>” thing.

=> please check that your node_modules folder does not somewhere contain a redux version 4.0.5

[markerikson]

I’d need to see where you’re trying to do dispatch(getDiagnostics()), but this looks like you are running into an issue that we’ve specifically documented in our “Usage with TS” guide page. The basic store Dispatch TS type does not know anything about thunks, so TS refuses to let you dispatch a thunk. You have to use an updated form of Dispatch that understands thunks are an acceptable thing to dispatch, and we show how to do that here:

• https://redux.js.org/recipes/usage-with-typescript#define-root-state-and-dispatch-types
• https://redux.js.org/recipes/usage-with-typescript#define-typed-hooks
• https://redux.js.org/recipes/usage-with-typescript#use-typed-hooks-in-components

Also, based on your comment it sounds like you might not yet be comfortable with the distinction between an “action” and a “thunk”. I’d suggest reading through the “Redux Fundamentals” tutorial in our docs, and specifically these sections:

• https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers#designing-actions
• https://redux.js.org/tutorials/fundamentals/part-6-async-logic