Context: A React Native application utilizing Redux for managing complexity.
Versions:
- typescript v3.0.3
- react-native v0.56.0
- redux v4.0.0
- @types/react-redux v6.0.9
- @types/redux v3.6.0
Issue: The main JSX component in my app is unable to access properties (errors detailed in comments).
The primary file:
//app.tsx
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<MainRedux ownProp="as"/> //[1]: Type '{ ownProp: string; }' is not assignable to type 'Readonly<AllProps>'. Property 'appPermissions' is missing in type '{ ownProp: string; }'.
</Provider>
);
}
}
and the secondary file:
//MainRedux.tsx
export interface ApplicationState { //originally in another file
appPermissions: AppPermissionsState;
//...
}
type StateProps = ApplicationState; //alias appPermissions is in the Application State
interface DispatchProps {
getPermissions: typeof getPermissions;
//...
}
interface OwnProps {
ownProp: string;
}
type AllProps = StateProps & DispatchProps & OwnProps;
export class MainRedux extends React.Component<AllProps> {
constructor(props: AllProps) {
super(props);
props.getPermissions(); //[2]: TypeError: undefined is not a function (evaluating 'props.getPermissions()')
}
//...
} //class
//...
const mapStateToProps: MapStateToProps<
StateProps,
OwnProps,
ApplicationState
> = (state: ApplicationState, ownProps: OwnProps): StateProps => {
return state;
};
const mapDispatchToProps: MapDispatchToPropsFunction<
DispatchProps,
OwnProps
> = (dispatch: Dispatch<AnyAction>, ownProps: OwnProps): DispatchProps => ({
getPermissions: bindActionCreators(getPermissions, dispatch)
//...
});
export default connect<StateProps, DispatchProps, OwnProps, ApplicationState>(
mapStateToProps,
mapDispatchToProps
)(MainRedux);
Error [1] occurs during compilation, while error [2] is a runtime issue.
Seeking assistance on identifying the problems. Appreciate your help.
Edit: Added debug information into mapStateToProps
and mapDispatchToProps
, but it seems like connect
is not calling them. There's a possibility that even the connect
function itself is not being triggered.