docs(connect): add connected generic component typing example#279
docs(connect): add connected generic component typing example#279ncthuc2004 wants to merge 3 commits into
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds documentation and examples for connecting generic components using a factory pattern and React-Redux's ConnectedProps. The review identifies a TypeScript type mismatch where the connector is defined with insufficient props for the generic component, suggesting the connector be moved inside the factory. There is also a recommendation to use unique item keys rather than array indices for selection logic to ensure more robust component behavior.
| const connector = connect(mapStateToProps); | ||
| type ReduxProps = ConnectedProps<typeof connector>; | ||
|
|
||
| export const createConnectedGenericList = <T,>() => { | ||
| type Props = GenericListProps<T> & ReduxProps; | ||
|
|
||
| const GenericList: React.FC<Props> = ({ items, renderItem, getItemKey, selectedId }) => ( | ||
| <ul> | ||
| {items.map((item, index) => ( | ||
| <li key={getItemKey(item)} data-selected={String(index) === selectedId}> | ||
| {renderItem(item)} | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| ); | ||
|
|
||
| return connector(GenericList); |
There was a problem hiding this comment.
The connector is defined using OwnProps, which only includes the selectedId property. When connector(GenericList) is called, TypeScript will throw an error because GenericList requires additional props (items, renderItem, getItemKey) that are not present in the OwnProps definition used to create the connector.
To fix this while maintaining type safety for generic components, you should define the connect call (or the connector) inside the factory where it can be aware of the full set of props, including the generic ones.
| const connector = connect(mapStateToProps); | ||
| type ReduxProps = ConnectedProps<typeof connector>; | ||
|
|
||
| export const createConnectedGenericList = <T,>() => { | ||
| type Props = GenericListProps<T> & ReduxProps; | ||
|
|
||
| const GenericList: React.FC<Props> = ({ items, renderItem, getItemKey, selectedId }) => ( | ||
| <ul> | ||
| {items.map((item, index) => ( | ||
| <li key={getItemKey(item)} data-selected={String(index) === selectedId}> | ||
| {renderItem(item)} | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| ); | ||
|
|
||
| return connector(GenericList); |
There was a problem hiding this comment.
The connector is typed using OwnProps, which only includes the selectedId property. When connector(GenericList) is called, TypeScript will throw an error because GenericList requires additional props (items, renderItem, getItemKey) that are not present in the OwnProps definition used to create the connector.
To fix this while maintaining type safety for generic components, you should define the connect call (or the connector) inside the factory where it can be aware of the full set of props, including the generic ones.
| const GenericList: React.FC<Props> = ({ items, renderItem, getItemKey, selectedId }) => ( | ||
| <ul> | ||
| {items.map((item, index) => ( | ||
| <li key={getItemKey(item)} data-selected={String(index) === selectedId}> |
There was a problem hiding this comment.
The selection logic String(index) === selectedId relies on the array index. In a generic list component where a unique key is available via getItemKey(item), it is more idiomatic and robust to compare the item's key against the selectedId instead of the index.
| <li key={getItemKey(item)} data-selected={String(index) === selectedId}> | |
| <li key={getItemKey(item)} data-selected={getItemKey(item) === selectedId}> |
| const GenericList: React.FC<Props> = ({ items, renderItem, getItemKey, selectedId }) => ( | ||
| <ul> | ||
| {items.map((item, index) => ( | ||
| <li key={getItemKey(item)} data-selected={String(index) === selectedId}> |
There was a problem hiding this comment.
The selection logic String(index) === selectedId relies on the array index. In a generic list component where a unique key is available via getItemKey(item), it is more idiomatic and robust to compare the item's key against the selectedId instead of the index.
| <li key={getItemKey(item)} data-selected={String(index) === selectedId}> | |
| <li key={getItemKey(item)} data-selected={getItemKey(item) === selectedId}> |
1 participant
Summary
createConnectedGenericList<T>())connect+ConnectedPropsinference so Redux-injected props stay strongly typed withoutanyWhy
Issue #55 requests a practical, compile-safe connected generic component example. This update combines the guide's generic list style with idiomatic React-Redux typing.
Validation
MyTypes/connectpatterns already used in the guideIssueHunt Summary
Referenced issues
This pull request has been submitted to: