mai1015

underdevelopment

© 2021. All rights reserved.

TS2345 error using react-redux connect

05 May 2020

TL;DR

install @type/[email protected]

npm i --save-dev @type/[email protected]

Then it will be ready to go.

What cause the problem

When trying to connect state with connect function shown belown.

export interface ILoginProps extends StateProps, DispatchProps {}
const Login: React.FC<ILoginProps> = (props) => { /** codes omitted **/ };

const mapStateToProps = ({ authentication }: IRootState) => ({
    isAuthenticated: authentication.isAuthenticated
});
const mapDispatchToProps = { loginUser };
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Login);

The newer @type/[email protected] is likely to cause problem because it is trying to resolve the dispatch function into different form.

// from
const loginUser = (username:string, password:string, rememberMe:boolean) => async (dispatch, getState) => Promise<Void>
// to
const loginUser = (username:string, password:string, rememberMe:boolean) => Promise<Void>

This will cause this extend ILoginProps does not match with type expected with connect() function.

Solution

Therefore, the easy is to downgrade by install the package below. The other way is to manually write the prop interface.

export interface ILoginProps extends StateProps {
    loginUser: Function
}

After more search, I found this answer. The document also has more information. This is another way to solve the problem.

export interface ILoginProps extends PropsConnected {}
const mapStateToProps = ({ authentication }: IRootState) => ({
    isAuthenticated: authentication.isAuthenticated
});
const mapDispatchToProps = { loginUser };

const connector =  connect(
    mapStateToProps,
    mapDispatchToProps
);
type PropsConnected = ConnectedProps<typeof connector>;

export default connector(Login);

Related Posts