Make useSelector value inspectable in dev tools

[dimaqq]

New Features

I would love it if I could see the values that useSelector() returns in the react dev tools, in the hooks section of the component details.

Today I can get to the value, but it requires several clicks, and it's a bit unclear, as it's shown as 1 of 3 Ref's:

Arguably the returned value could large (hairy nested object, large string), thus, some heuristic is needed to truncate the representation.

Naive implementation is easy with useDebugValue() but the above is a concern.

What is the new or updated feature that you are suggesting?

New

Why should this feature be included?

• to improve developer experience
• to appear similar to useState
• library user cannot do this in their component code

What docs changes are needed to explain this?

Eh?

[markerikson]

Already done in #1525 and #1530 - we just have been very slow in releasing a new build.

I will attempt to get a new build out in the next day or so.

[markerikson]

Finally live in https://github.com/reduxjs/react-redux/releases/tag/v7.2.1

[dimaqq]

🎉 Fantastic! 🎉
(undefined is expected)

P.S. now if there were a babel macro to annotate the purpose of selector, e.g. the variable name from const token_claims = useSelector(...) :wishful-thinking:

[th3fallen]

@dimaqq if you find such a thing please for the love of everything holy share it