redux-devtools icon indicating copy to clipboard operation
redux-devtools copied to clipboard

Dispatch: Custom action creators fails with spread args

Open spamshaker opened this issue 3 months ago • 2 comments

When an action creator is defined as a thunk or a prepare function and its parameters are destructured (e.g. function ({ id, name }) { … }), the Redux DevTools dispatcher panel does not list those arguments.

The UI shows an empty parameter list, which makes it hard to debug actions that rely on destructured payloads.

The problem originates from the getParams helper in redux-devtools-utils (see commit f0330162e6727a9a25aba9d2359f393f884cf68f).

getParams currently only handles simple parameter names and does not support the ObjectBindingPattern syntax introduced by ES2020 for destructuring.

This issue is similar to the one reported in get-params (https://github.com/fahad19/get-params/issues/1 ) and affects any action creator that uses destructuring in its signature.

Expected behavior:

getParams should detect destructured parameters and return them as individual argument names so that the dispatcher view can display id, name, etc.

Steps to reproduce:

  1. Create a thunk or prepare function with destructured parameters.
  2. Open Redux DevTools and navigate to the dispatcher view.
  3. Observe that no arguments are listed for that action.

Screenshots:

Image

This is probably the place where the getParams is producing the result https://github.com/reduxjs/redux-devtools/blob/f0330162e6727a9a25aba9d2359f393f884cf68f/packages/redux-devtools-utils/src/index.ts#L29

Suggested fix:

Use esprima or similar parser to handle that functionality correctly. https://esprima.org/demo/parse.html?code=%2F%2F%20Life%2C%20Universe%2C%20and%20Everything%0Afunction%20prepareMyAction(%7Bid%20%3D%201%7D)%7B%0A%0A%7D

I am reporting it here cause even if it would be fixed in get-params. The form of given arguments may need to be handled in the dispatcher functionality eg to produce a flat form e.g.

given the action creator has

function someAction({id = '', name = 1}){
 // Body ...
}

parameters form would be:

id name

and so on...

spamshaker avatar Sep 18 '25 10:09 spamshaker

I don't understand the context of this issue. Can you describe what you're trying to do?

markerikson avatar Sep 19 '25 01:09 markerikson

I don't understand the context of this issue. Can you describe what you're trying to do?

@markerikson thanks for quick response. I updated a descriptio, however I would separate two things:

Proposed Bug fix : would be to ignore destructured arguments and include them in ...rest field Feature request: to handle destructured args using esprima with providing form for each field

for the feature request the form of destructured params would look like, and could be populated with defaults. Where arg could be an indexed name of the arguments arg1, arg2 ...

Image

spamshaker avatar Sep 19 '25 07:09 spamshaker