Action creators doc comments not showing

user_9448953 0
Viewed 74

Looking at adopting using redux-toolkit in our app but I can't seem to get the doc comments we have for our action creators to show.

Old code:

const ADD_NAME = 'ADD_NAME';
/**
 * Sets the name for the user in our state.
 * @param name The updated name
 */
export function addName(name: string) {
   return {
     payload: name,
     type: ADD_NAME,
   };
}

In VSCode, whenever I dispatch addName(), hovering over the function gives me the tooltip with the documentation there as expected.

Recreating this action creator using redux-toolkit:

/**
 * Sets the name for the user in our state.
 * @param name The updated name of the User
 */
export const addName = createAction<string>(ADD_NAME);

When I hover over this new addName during a dispatch, instead of seeing the documentation I wrote:

Sets the name for the user in our state.

I see this:

Calling this {@link redux#ActionCreator} with an argument will return a {@link PayloadAction} of type T with a payload of P

That's the internal documentation for ActionCreatorWithPayload from the redux-toolkit typings file.

What am I missing that the doc comments I added for my addName action creator is shown and not the redux-toolkit doc comments?

I realize one is me commenting a function and the other is commenting a const var, but I'd have expected my comments for that addName const to be shown as the tooltip, no?

redux-toolkit redux typescript
1 Answers

That is a very good question. This seems to depend on the editor - and on the context in which the documentation is accessed.

In VSCode, it looks like this at first: Screenshot from VSCode

When you just write addName, until it is completed, you get the docblock from the variable addName. Once you write a (, it looks "into" the variable value, recognizes the function and takes the docblock from the function itself - and that is an action creator.

I do not think that you can really override that behavior any further, but I'd love to see someone to come up with a good way.

I did some more experimenting: while TypeScript does lose most comments on mapped function types, you could use one object argument instead of positional arguments and annotate the individual properties with docblocks. That would probably give you the most info that is possible given what TypeScript offers at the moment (and of course, autocomplete for the "argument names"):


const slice = createSlice({
  name: 'test',
  initialState: 0,
  reducers: {
    test: {
      prepare({name, age}: {
        /** The name! */
        name: string,
        /** The age! */
        age: number
      }
      ) {
        return { payload: { name, age } };
      },
      reducer(x, action: any) { }
    }
  }
})

// hovering over age or name will give you more info
slice.actions.test({ age: 5, name: "" })
user_20759440
Related