Add @connect decorator TypeScript example - #357
Add @connect decorator TypeScript example#357libracapitalinvestments-rgb wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
Code Review
This pull request refactors and simplifies the React & Redux in TypeScript guide, focusing on modern type-checking patterns for functional and class components, Redux integration, and configuration. It also introduces examples for using the @connect decorator with class components. Feedback on the changes points out that the newly added CounterWithDecorator component in docs/src/connected-class-components/with-connect-decorator.tsx should be cast to React.ComponentType<OwnProps> upon export to prevent TypeScript from requiring consumers to provide Redux-injected props.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| } | ||
| } | ||
|
|
||
| export default CounterWithDecorator; |
There was a problem hiding this comment.
Without casting the exported component, TypeScript will require consumers of CounterWithDecorator to provide all props (including count, onIncrement, and onDecrement which are injected by Redux). To fix this, cast the exported component to React.ComponentType<OwnProps> so that only OwnProps are required by parent components.
| export default CounterWithDecorator; | |
| export default CounterWithDecorator as React.ComponentType<OwnProps>; |
Adds a documented example showing how to use the
@connect(..)decorator syntax with TypeScript for class components, including proper typing of own props vs connected props. Closes #68