WIP: Static Types doc page #1439
Conversation
|
Explanations definitely need fleshing out and polishing. Uploading as a WIP to get feedback. Any feedback would be appreciated but primarily looking for: |
|
Deploy preview for react-redux-docs ready! Built with commit 3142336 |
|
Also: couldn't figure out how to get the page working with docusaurus, so I didn't do anything in that area 😬 . Next thing I'm gonna do is read #1336 - if that's getting finished up part of me wants to wait for that to be merged in and then integrate what I'm writing into that. |
|
|
||
| # Type safety and React-Redux | ||
|
|
||
| The [`react-redux` type definitions](https://npm.im/@types/react-redux) export some helpers to make it easier to write typesafe interfaces between your redux store and your React components. |
There was a problem hiding this comment.
Jumping straight into this sentence feels odd. Seems like there needs to be more of an introduction here.
I'd suggest rephrasing this section to say that React-Redux doesn't include its own types, and that you need to install @types/react-redux first.
Also, the "helpers" bit really only applies to connect, so let's move that phrasing later.
There was a problem hiding this comment.
You don't think the TypedUseSelectorHook type counts?
| id: static-types | ||
| title: Type safety and React-Redux | ||
| hide_title: true | ||
| sidebar_label: Type safety and React-Redux |
There was a problem hiding this comment.
Maybe retitle this to "Static Typing"?
| If you manually type your selector functions, `useSelector` will return the same type as your selector | ||
|
|
||
| ```ts | ||
| // selectIsOn always returns a boolean, so isOn is typed as a boolean |
There was a problem hiding this comment.
Show the definition of selectIsOn first.
|
|
||
| ## Typing the useSelector hook | ||
|
|
||
| If you manually type your selector functions, `useSelector` will return the same type as your selector |
There was a problem hiding this comment.
Maybe reword this as "If your selector function has declared types, ..."
| const isOn = useSelector((state: MyStateType) => state.isOn) | ||
| ``` | ||
|
|
||
| If you'd like, you can define a typed `useSelect` hook using a helper type |
There was a problem hiding this comment.
Prefix with "If you want to avoid repeating the state type declaration, you can..."
| isOn: boolean | ||
| } | ||
|
|
||
| const connector = connect( |
There was a problem hiding this comment.
I'd want to highlight that normally we do the connect(mapState, mapDispatch)(MyComponent) double-function-call all in one step at the end, but for this to work we break it up into two steps (and particularly doing the first part before the component definition) so we can infer the props from the connector function.
| The return type of `ConnectedProps` can then be used to type your props object. | ||
|
|
||
| ```tsx | ||
| interface Props extends PropsFromRedux { |
There was a problem hiding this comment.
Y'know, I keep forgetting you can extend interfaces.
There was a problem hiding this comment.
Would you rather I say type Props = PropsFromRedux & {? I've a slight preference for types, but the codebase I work on mostly uses interfaces. I've no idea which would be easier to understand
There was a problem hiding this comment.
That's the syntax I've been using, but not sure if it matters that much.
| backgroundColor: string | ||
| } | ||
|
|
||
| export const MyComponent = connector((props: Props) => ( |
There was a problem hiding this comment.
Let's separate out the component definition just for clarity.
| )) | ||
| ``` | ||
|
|
||
| If you are using untyped selectors or for some other reason would rather, you can also pass type arguments to `connect` and use those same types to create your own props type. |
There was a problem hiding this comment.
"would rather".... what?
There was a problem hiding this comment.
"would rather not rephrase an awkwardly worded sentence"
|
|
||
| type Props = StateProps & DispatchProps & OwnProps | ||
|
|
||
| const connector = connect< |
There was a problem hiding this comment.
Okay, so this shows manually typing connect, but we should show using Props explicitly for the component when it's declared separately. (Feel free to omit the actual rendering logic here.)
|
Paging @wgao19 . Thoughts on the existing content? Can you do something similar for the Flow part? |
|
Revised some things according to your feedback, @markerikson. In addition to the little things, I swapped the order of the last section around and added a bit about type hoisting. Not sure if that bits necesssary |
|
@wgao19 @endiliey @yangshun The only way I can get this to show up in the main sidebar is if I explicitly put the page into I have to say that I find the versioning stuff very confusing. Maybe it's harder because we're treating v7.1 as our "current" version - I'd kinda like changes to |
|
In any case, I'm happy with the way this looks now, so I'll merge it. I'd still like to see if there's a better way to add new pages with the versioning, though. |
|
Thanks to @JNaftali for getting this put together! |
* first draft of new page on static types * revised because feedback * mention that we're splitting up the export and connect call * Update "Static Types" content * Add "Static Typing" page to sidebar * Move Static Typing page to get it to show up in 7.1 sidebar
Static types doc page - see #1001 (comment)