Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[react-redux] add ConnectedProps type #37300

Conversation

@1000hz
Copy link
Contributor

1000hz commented Aug 1, 2019

This PR adds a ConnectedProps type to infer the props a connector will inject into your component. This lets you use the following pattern:

type Props = {
  ownProp: string;
}

type ReduxProps = ConnectedProps<typeof connector>

const Component: React.FC<Props & ReduxProps> = ({ ownProp, injectedProp, dispatch }) => {
  return <div />
}

const connector = connect((state: any) => ({
  injectedProp: "hello"
}))

export default connect(Component)

Big shoutout to @robertcepa for coming up with this pattern at Cloudflare!


Please fill in this template.

  • Use a meaningful title for the pull request. Include the name of the package modified.
  • Test the change in your own code. (Compile and run.)
  • Add or edit tests to reflect the change. (Run with npm test.)
  • Follow the advice from the readme.
  • Avoid common mistakes.
  • Run npm run lint package-name (or tsc if no tslint.json is present).
@typescript-bot

This comment has been minimized.

Copy link
Contributor

typescript-bot commented Aug 1, 2019

@1000hz Thank you for submitting this PR!

🔔 @tkqubo @kenzierocks @clayne11 @tansongyang @NicholasBoll @mDibyo @Kallikrein @val1984 @jrakotoharisoa @apapirovski @surgeboris @soerenbf @MrWolfZ - please review this PR in the next few days. Be sure to explicitly select Approve or Request Changes in the GitHub UI so I know what's going on.

If no reviewer appears after a week, a DefinitelyTyped maintainer will review the PR instead.

@typescript-bot

This comment has been minimized.

Copy link
Contributor

typescript-bot commented Aug 1, 2019

👋 Hi there! I’ve run some quick performance metrics against master and your PR. This is still an experiment, so don’t panic if I say something crazy! I’m still learning how to interpret these metrics.

Let’s review the numbers, shall we?

Comparison details 📊
master #37300 diff
Batch compilation
Memory usage (MiB) 155.3 152.3 -1.9%
Type count 66553 67005 +0.7%
Assignability cache size 60510 60775 +0.4%
Subtype cache size 2515 2544 +1.2%
Identity cache size 1153 1155 +0.2%
Language service
Samples taken 1733 1807 +4.3%
Identifiers in tests 1733 1807 +4.3%
getCompletionsAtPosition
    Mean duration (ms) 646.5 615.3 -4.8%
    Median duration (ms) 639.4 608.8 -4.8%
    Mean CV 7.1% 6.5% -9.0%
    Worst duration (ms) 866.7 954.9 +10.2%
    Worst identifier ConnectedWithTypeHintClass ConnectedWithTypeHintClass
getQuickInfoAtPosition
    Mean duration (ms) 567.1 545.5 -3.8%
    Median duration (ms) 557.4 534.8 -4.1%
    Mean CV 8.0% 7.5% -6.7%
    Worst duration (ms) 806.5 796.2 -1.3%
    Worst identifier createElement foo

It looks like nothing changed too much. I’m pretty lenient since I’m still an experiment, so take a look anyways and make sure nothing looks out of place.


If you have any questions or comments about me, you can ping @andrewbranch. Have a nice day!

@typescript-bot typescript-bot moved this from Waiting for Reviewers to Review in Pull Request Status Board Aug 6, 2019
@typescript-bot

This comment has been minimized.

Copy link
Contributor

typescript-bot commented Aug 6, 2019

A definition owner has approved this PR ⭐️. A maintainer will merge this PR shortly. If it shouldn't be merged yet, please leave a comment saying so and we'll wait. Thank you for your contribution to DefinitelyTyped!

@sandersn

This comment has been minimized.

Copy link
Contributor

sandersn commented Aug 6, 2019

I'm not comfortable changing such a widely-used package without some other type authors looking at the change. @tkqubo @kenzierocks @clayne11 @tansongyang @NicholasBoll @mDibyo @Kallikrein @val1984 @jrakotoharisoa @apapirovski @surgeboris @soerenbf @MrWolfZ do you mind taking a look? It's an addition so it should be easy to review if you know the existing types already.

Copy link
Contributor

sandersn left a comment

Requesting changes so the bot will put it in the correct category.

@typescript-bot typescript-bot moved this from Review to Needs Author Attention in Pull Request Status Board Aug 7, 2019
@typescript-bot

This comment has been minimized.

Copy link
Contributor

typescript-bot commented Aug 7, 2019

@1000hz One or more reviewers has requested changes. Please address their comments. I'll be back once they sign off or you've pushed new commits or comments. Thank you!

@typescript-bot

This comment has been minimized.

Copy link
Contributor

typescript-bot commented Aug 13, 2019

@1000hz I haven't seen anything from you in a while and this PR currently has problems that prevent it from being merged. The PR will be closed tomorrow if there aren't new commits to fix the issues.

@1000hz

This comment has been minimized.

Copy link
Contributor Author

1000hz commented Aug 13, 2019

@typescript-bot pls no

@sandersn given no previous contributors have responded to this after a week, what's the next move?

@sandersn

This comment has been minimized.

Copy link
Contributor

sandersn commented Aug 13, 2019

Ping the authors again or try to contact them on some other medium.

@tkqubo @kenzierocks @clayne11 @tansongyang @NicholasBoll @mDibyo @Kallikrein @val1984 @jrakotoharisoa @apapirovski @surgeboris @soerenbf @MrWolfZ can you take a look at this?

Copy link
Contributor

octylFractal left a comment

This looks fine to me.

@typescript-bot typescript-bot moved this from Needs Author Attention to Check and Merge in Pull Request Status Board Aug 13, 2019
@PranavSenthilnathan PranavSenthilnathan merged commit df41214 into DefinitelyTyped:master Aug 15, 2019
3 checks passed
3 checks passed
DefinitelyTyped.BenchmarkPR Build #10660 succeeded
Details
DefinitelyTyped.DefinitelyTyped Build #20190801.48 succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
Pull Request Status Board automation moved this from Check and Merge to Done Aug 15, 2019
@PranavSenthilnathan

This comment has been minimized.

Copy link
Contributor

PranavSenthilnathan commented Aug 15, 2019

Congratulations on your first DefinitelyTyped contribution! Thank you for being a part of the community!

@typescript-bot

This comment has been minimized.

Copy link
Contributor

typescript-bot commented Aug 15, 2019

@markerikson

This comment has been minimized.

Copy link

markerikson commented Oct 27, 2019

Awesome! We'll have to add this to the actual docs somehow. #31227 can be closed now.

@markerikson markerikson mentioned this pull request Oct 27, 2019
7 of 14 tasks complete
@henrikra

This comment has been minimized.

Copy link
Contributor

henrikra commented Oct 28, 2019

What about when you pass mapDispatchToProps? Then the component won't receive dispatch ⚠️ Therefore the ConnectedProps won't tell correct types :/

@markerikson

This comment has been minimized.

Copy link

markerikson commented Oct 28, 2019

@henrikra: as far as I know, the whole point of ConnectedProps<T> is that it infers all props that connect is passing to your own component. Granted, I haven't experimented with it further, but it definitely comes up with a combination of props from mapState and props from mapDispatch.

@henrikra

This comment has been minimized.

Copy link
Contributor

henrikra commented Oct 28, 2019

Yeah that is true 👍 But I am talking about dispatch function. Check the documentation of react-redux https://react-redux.js.org/using-react-redux/connect-mapdispatch#more-declarative It clearly says: if you define your own mapDispatchToProps, the connected component will no longer receive dispatch.

@markerikson

This comment has been minimized.

Copy link

markerikson commented Oct 28, 2019

Yes, I'm very aware of both the behavior and the documentation, but I don't understand what your question is here. Can you clarify?

@henrikra

This comment has been minimized.

Copy link
Contributor

henrikra commented Oct 28, 2019

Does ConnectedProps take this behavior into account? So if I pass mapDispatchToProps to connect is ConnectProps wise enough not to include dispatch in the props of my component?

@markerikson

This comment has been minimized.

Copy link

markerikson commented Oct 28, 2019

Pretty sure, yes. Try it out and see what happens :)

@1000hz

This comment has been minimized.

Copy link
Contributor Author

1000hz commented Oct 28, 2019

@henrikra

This comment has been minimized.

Copy link
Contributor

henrikra commented Oct 29, 2019

Thx @1000hz !

@markerikson

This comment has been minimized.

Copy link

markerikson commented Nov 23, 2019

The ConnectedProps<T> pattern is now described in the React-Redux docs, and we're officially recommending that people use it:

https://react-redux.js.org/using-react-redux/static-typing#typing-the-connect-higher-order-component

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.