Typescript redux connected component type error

Question

I am trying to merge state from redux into properties in a react component defined in a tsx file.

I have defined the type LoggedInUserState elsewhere, it is exported like this in its file:

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 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;

TypeScript shows the following type error on the final line (mapStateToProps) of my tsx file:

Argument of type '(state: LoggedInUserState, originalProps: LinkProps) => ExpandedAuthProps' is not assignable 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' is not assignable to type 'LinkProps'. Type 'undefined' is not assignable to type 'LinkProps'.

What is wrong with the declarations?

Matt McCutchen · Accepted Answer · 2018-08-01 19:50:00Z

1

I can't reproduce the error you got; I get a different one. This compiles for me:

export default connect(mapStateToProps)(AuthenticatedLink);

If I understand react-redux correctly, you shouldn't be asserting the result back to typeof AuthenticatedLink. The whole point of the connect is that it changes the props type of the component from ExpandedAuthProps to LinkProps because the LoginStateProps part is supplied by your mapStateToProps function.

answered Aug 1, 2018 at 19:50

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript redux connected component type error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related