Typescript и Redux connect

0

Я пытаюсь подключить Redux к компоненту с помощью Typescript и продолжаю сталкиваться с той же ошибкой.

Аргумент типа 'typeof BaseLayoutUnconnected' не может быть назначен параметру типа 'Component <any, {}, any>'. Свойство 'setState' отсутствует в типе '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);

Это вызывается в моем app.tsx через

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

Вот реквизит и состояние

export interface IBaseLayoutProps {
    chatItems: RootState.ChatState;
    actions: ChatActions;
}

export interface IBaseLayoutState {}

ChatActions выглядит так

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'>;
  • 0
    попробуйте добавить значения по умолчанию для this.state
  • 0
    Добавление конструктора (реквизит) {супер (реквизит); this.state = {}; } не решает проблему. Отредактировал оригинальный вопрос, чтобы включить это.
Теги:
react-redux
redux

1 ответ

2
Лучший ответ

Эта проблема у меня тоже была, когда я впервые начал с Redux и TypeScript. Есть хитрое решение. Метод подключения занимает много дженериков. Я пытаюсь объяснить это на вашем примере.

Прежде всего вы должны разделить свойства вашего 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 {}

Затем вы должны заполнить дженерики различных редукционных функций.

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)

хороший источник, где вы можете найти все эти вещи, которые я написал, и больше это хранилище

Поделиться
  • 0
    Спасибо @Sly321. Sly321. Все изменилось, как вы предложили, но получаю похожую ошибку. Теперь говорится, что «Аргумент типа« typeof BaseLayoutUnconnected »не может быть назначен параметру типа« Component <IBaseLayoutOwnProps, {}, any> ». Свойство« setState »отсутствует в типе« typeof BaseLayoutUnconnected »."
  • 0
    Где вы получаете ошибку? В роутере или в функции подключения? У вас есть хранилище, где я могу проверить источник?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню