CODEWITHSUNDEEP
typescriptreact-redux
Joon
Joon

Reputation: 2147

Typescript redux connected component type error

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?

Upvotes: 0

Views: 1016

Answers (1)

Matt McCutchen
Matt McCutchen

Reputation: 30919

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.

Upvotes: 1

Related Questions