Last active
September 19, 2021 09:58
-
-
Save christianchown/05e084c78ec216070a5a2b80f0534d4b to your computer and use it in GitHub Desktop.
ConnectedProps - the missing TypeScript helper for Redux
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { InferableComponentEnhancerWithProps } from 'react-redux'; | |
export default type ConnectedProps<T> = T extends InferableComponentEnhancerWithProps<infer Props, infer _> ? Props : never; | |
// credit: https://github.com/Voronar |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// use it like this | |
import React from 'react'; | |
import { connect } from 'react-redux'; | |
import ConnectedProps from './ConnectedProps'; | |
import { State, anAction, someOtherAction } from './yourReduxStuff'; | |
const mapStateToProps = (state: State) => ({ | |
slice: state.slice, | |
otherValue: state.some.otherValue, | |
}); | |
const mapDispatchToProps = { // I've used the object shorthand, but all flavours of mapDispatchToProps will work | |
anAction, | |
someOtherAction, | |
}; | |
// define your connector *before* the component, so you can use ConnectedProps to extract the types | |
const connector = connect(mapStateToProps, mapDispatchToProps); | |
type PropsFromRedux = ConnectedProps<typeof connector>; | |
// PropsFromRedux now has your store prop types automagically inferred | |
function SomeComponent({ slice, otherValue, anAction, someOtherAction }: PropsFromRedux) { | |
return .... | |
} | |
export default connector(SomeComponent); |
I actually found it a couple months ago :) I just now replied because we now have that info in the docs.
amazing thank you for this... for anyone interested in react-router + redux + TypesScript -- this is how I did it to get types working
import { RouteComponentProps, withRouter } from 'react-router-dom';
const mapStateToProps = (state: State) => ({
someState
});
const mapDispatchToProps = {
someFunc
};
const connector = connect(mapStateToProps, mapDispatchToProps);
type PropsFromRedux = ConnectedProps<typeof connector>;
const MyComponent = ({
SomeStateAsProps
}: PropsFromRedux & RouteComponentProps) => { // added the "& RouteComponentProps
return (
'working
);
}
export default connector(withRouter(MyComponent)); // <- no more squiggles
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@markerikson Yes, I actually noticed this myself when I relied on VSCode auto import and it imported it from react-redux instead of my utility types. Thank you.
The most interesting bit though is how did you suddenly find this old gist just days after I replied? 😮