Proposal: Type helper to enable strongly-typed dispatch function

[srmagura]

The following code shows how to make your dispatch function type safe with a type helper called ActionType. Would it make sense to include this helper in RTK? If so, I can PR.

This is heavily inspired by typesafe-actions.

import {
  ActionCreator,
  configureStore,
  createAction,
  Dispatch,
  Reducer,
} from "@reduxjs/toolkit";

const userActions = {
  add: createAction<number, "user/add">("user/add"),
  remove: createAction<string, "user/remove">("user/remove"),
};

const customerActions = {
  charge: createAction<void, "customer/charge">("customer/charge"),
};

const appActions = {
  userActions,
  customerActions,
};

type ActionType<T extends any> = T extends ActionCreator<any>
  ? ReturnType<T>
  : { [K in keyof T]: ActionType<T[K]> }[keyof T];

// Example usage of ActionType
type UserAction = ActionType<typeof userActions>;
// type UserAction = {
//     payload: number;
//     type: "user/add";
// } | {
//     payload: string;
//     type: "user/remove";
// }

type CustomerAction = ActionType<typeof customerActions>;
// type CustomerAction = {
//     payload: undefined;
//     type: "customer/charge";
// }

type AppAction = ActionType<typeof appActions>;
// type AppAction =
//   | {
//       payload: number;
//       type: "user/add";
//     }
//   | {
//       payload: string;
//       type: "user/remove";
//     }
//   | {
//       payload: undefined;
//       type: "customer/charge";
//     };

type AppDispatch = Dispatch<AppAction>;

const dispatch: AppDispatch = (action) => action;

dispatch(userActions.add(1)); // OK

// All of the following produce type errors as desired
dispatch(undefined);
dispatch("user/add");
dispatch(userActions.add); // forgot to call the action creator
dispatch({ type: "user/add", payload: "wrong payload type" });
dispatch({ type: "nonExistentActionType" });

//
// Bonus: integration with configureStore
//
type AppState = { foobar: number };

const appReducer: Reducer<AppState, AppAction> = (
  state = { foobar: 0 },
  action: AppAction
) => state;

const store = configureStore<AppState, AppAction>({ reducer: appReducer });

store.dispatch(userActions.add(0)); // OK
store.dispatch("user/add"); // ERROR

store.dispatch(async (dispatch) => {
  dispatch(userActions.add(0)); // OK
});
store.dispatch(async (dispatch) => {
  dispatch({ type: "nonExistentActionType" }); // OK when it ideally wouldn't be
});

(https://github.com/srmagura/redux-action-type-poc)

[phryneas]

Following that pattern pretty much implies that it would be wrong to dispatch actions that no reducer is actively listening to - but that is totally okay.
Actions can also be used by middleware, or also just be dispatched to be used later in the future.

In a Redux store, there are always additional actions you did not dispatch, but that will arrive in your Reducers, so your reducers have to deal with unknown actions. Thus, it is perfectly fine to dispatch unknown actions.

Also, it is a lot of work to "collect" these union action types, and we really don't want people to start another pattern that adds boilerplate with very little value.

If you really want to make sure that only "correct" actions are dispatched in your code base, I'd recommend using a linter to forbid using inline-specified actions and only use action creators. That gets you 95% there without an additional line of code.

PS: Calling configureStore with generics is never recommendable since it will erase all the middleware overloads to dispatch, potentially making your application less typesafe, not more.

[srmagura]

Thanks @phryneas, that makes sense. What led me down this path was trying to prevent this bug which actually happened in my code:

store.dispatch(userActions.add) // forgot to call the action creator

With RTK, this code does not produce a type error. So your recommended solution to this would be a lint rule? Is there a package that provides this lint rule? Thanks.

[phryneas]

I unfortunately don't - but if you find one (or create one), that might be very valuable for the community.

[srmagura]

If anyone is curious, I settled on defining the following types in my code. This dispatch type will prevent you from forgetting to call an action creator. Note that I don't use thunks.

import type { Dispatch } from 'react'

export interface MyAction {
    type: string
    payload?: unknown
    meta?: unknown
}

export type MyDispatch = Dispatch<MyAction>