Seeking assistance on integrating state from redux into properties within a react component that is outlined in a tsx file.
The LoggedInUserState type has been defined elsewhere and is exported as shown below:
import { Action, Reducer } from 'redux';
// -----------------
// STATE - This defines the type of data maintained in the Redux store.
export interface LoggedInUserState {
userName: string,
isAdmin: boolean,
isUserManager: boolean
}
This is the contents of my tsx file:
import * as React from 'react';
import { connect } from 'react-redux';
import { LoggedInUserState } from 'ClientApp/store/LoggedInUser';
import { NavLink } from 'react-router-dom';
export interface LinkProps {
routeTo: string,
name: string,
glyphIcon: string
}
interface LoginStateProps {
isAuthenticated: boolean
}
type ExpandedAuthProps =
LinkProps & LoginStateProps;
class AuthenticatedLink extends React.Component<ExpandedAuthProps, null> {
public render() {
return this.props.isAuthenticated ?
<NavLink exact to={this.props.routeTo} activeClassName='active'>
<span className={this.props.glyphIcon}></span> {this.props.name}
</NavLink> :
<NavLink exact to={'/loginUser'} activeClassName='active'>
<span className='glyphicon glyphicon-ban-circle'></span> {this.props.name}
</NavLink>;
}
}
function mapStateToProps(state: LoggedInUserState, originalProps: LinkProps): ExpandedAuthProps {
return {
routeTo: originalProps.routeTo,
name: originalProps.name,
glyphIcon: originalProps.glyphIcon,
isAuthenticated: state.userName != ''
}
}
export default connect<LoggedInUserState, {}, LinkProps>
(mapStateToProps)(AuthenticatedLink) as typeof AuthenticatedLink;
An error with typescript is being displayed at the end line regarding mapStateToProps:
Argument of type '(state: LoggedInUserState, originalProps: LinkProps) => ExpandedAuthProps' cannot be assigned to parameter of type 'MapStateToPropsParam'. Type '(state: LoggedInUserState, originalProps: LinkProps) => ExpandedAuthProps' is not assignable to type 'MapStateToPropsFactory'. Types of parameters 'originalProps' and 'ownProps' are incompatible. Type 'LinkProps | undefined' cannot be assigned to type 'LinkProps'. Type 'undefined' cannot be assigned to type 'LinkProps'.
What could be the issue with the declarations?