Agfdhyk

I'm trying to connect redux to a component using Typescript and keep running into the same error.

Argument of type 'typeof BaseLayoutUnconnected' is not assignable to
parameter of type 'Component < any, {}, any>'. Property 'setState' is
missing in type 'typeof BaseLayoutUnconnected'.

import * as React from 'react';

import { IBaseLayoutProps, IBaseLayoutState } from './base-layout.types';

import { ChatContainer } from '../../components';

import { connect, DispatchProp } from 'react-redux';

import { bindActionCreators, Dispatch } from 'redux';

import { RouteComponentProps } from 'react-router';

import { ChatActions } from 'app/actions';

import { RootState } from 'app/reducers';

import { omit } from 'app/utils';



export const mapStateToProps = (state: RootState, ownProps) => {

    return {

        chatItems: state.chatItems

    };

};



export const mapDispatchToProps = (dispatch: Dispatch) => ({

    actions: bindActionCreators(omit(ChatActions, 'Type'), dispatch)

});



export class BaseLayoutUnconnected extends React.Component<IBaseLayoutProps, IBaseLayoutState> {

   constructor(props) {

        super(props);

        this.state = {};

    }



    render() {

        const { actions, chatItems } = this.props;

        return <ChatContainer actions={actions} chatItems={chatItems} />;

    }

}



export const BaseLayout = connect(

    mapStateToProps,

    mapDispatchToProps

)(BaseLayoutUnconnected);

This is being called in my app.tsx via

 <Route exact={true} path="/" component={BaseLayout} />

Here are the props and state

export interface IBaseLayoutProps {

    chatItems: RootState.ChatState;

    actions: ChatActions;

}



export interface IBaseLayoutState {}

ChatActions looks like

import { createAction } from 'redux-actions';

import { ChatItemModel } from 'app/models';



export namespace ChatActions {

    export enum Type {

        ADD_CHAT_ITEM = 'ADD_CHAT_ITEM'

    }



    export const addChatItem = createAction<PartialPick<ChatItemModel, 'text'>>(Type.ADD_CHAT_ITEM);

}



export type ChatActions = Omit<typeof ChatActions, 'Type'>;

That's a problem i had too when i first started with Redux and TypeScript. There is a tricky solution. The connect methode takes alot of generics. I try to explain it with your example.

First of all you have to split the properties of your BaseLayoutUnconnected.

export interface IBaseLayoutStateProps {

    chatItems: RootState.ChatState;

}



export interface IBaseLayoutDispatchProps {

    actions: ChatActions;

}



export interface IBaseLayoutOwnProps {

    // put properties here you want to make available from the connected component

}



export type IBaseLayoutProps = IBaseLayoutOwnProps & IBaseLayoutDispatchProps & IBaseLayoutStateProps 



export interface IBaseLayoutState {}

Then you have to fill the generics of the different redux functions.

const mapStateToProps: MapStateToProps<IBaseLayoutStateProps, {}, RootState> = (state: RootState): IBaseLayoutStateProps => ({

    chatItems: state.chatItems

})



export const mapDispatchToProps: MapDispatchToPropsFunction<IBaseLayoutDispatchProps, IBaseLayoutOwnProps> = (dispatch: Dispatch, ownProps: IBaseLayoutDispatchProps): IBaseLayoutDispatchProps => ({

    actions: bindActionCreators(omit(ChatActions, 'Type'), dispatch)

});



export default connect<IBaseLayoutStateProps , IBaseLayoutDispatchProps, IBaseLayoutOwnProps , RootState>(

    mapStateToProps,

    mapDispatchToProps

)(BaseLayoutUnconnected as any)

a good source, where you can find all this stuff i wrote and more is this repository