reactjs - 打字稿和 Redux 连接
问题描述
我正在尝试使用 Typescript 将 redux 连接到组件并继续遇到相同的错误。
“typeof BaseLayoutUnconnected”类型的参数不可分配给“Component < any, {}, any>”类型的参数。“typeof BaseLayoutUnconnected”类型中缺少属性“setState”。
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'>;
解决方案
这也是我刚开始使用 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 {}
然后你必须填充不同 redux 函数的泛型。
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)
一个很好的来源,在那里你可以找到我写的所有这些东西,更多的是这个存储库
推荐阅读
- sass - 以编程方式创建 Sass 映射
- mysql - MySQL 查询【二表】
- google-apps-script - 创建数据工作室插件 - 我如何使用 oauth2“客户端凭据”
- shopify - 在 Shopify 中隐藏 API 凭据?
- html - 宽度网页没有填满屏幕
- string - cython - 从 numpy 数组操作字符串
- angular - Angular 6 - ngModel 的值仅在单击某处时出现
- haskell - 为什么 Haskell 有底部(无限递归)?
- asp.net-core - .netCore Web 应用程序在包含 nuget 后在 startup.cs 中的 UseWebpackDevMiddleware 处引发异常
- mongodb - Mongo - 如何在单个查询中更新具有不同值的多个文档?