typescript - 使用 connect 时使用 redux-thunk 键入错误
问题描述
我正在使用带有 typescript 的 redux 和 redux-thunk。我正在尝试使用 mapDispatchToProps 通过 connect() 向组件注入一个简单的 thunk 动作创建器。
行动
export enum TestActionTypes {
THUNK_ACTION = "THUNK_ACTION"
}
export interface ThunkAction {
type: TestActionTypes.THUNK_ACTION;
}
export type TestAction = ThunkAction;
动作创作者
export function thunkActionCreator() {
return function(dispatch: Dispatch<any>) {
dispatch({ type: TestAction.THUNK_ACTION });
};
连接组件
interface DemoScreenState {}
interface OwnProps {}
interface StateProps {}
interface DispatchProps {
testThunk: () => void;
}
type DemoScreenProps = StateProps & DispatchProps & OwnProps;
class DemoScreen extends React.Component<
DemoScreenProps,
DemoScreenState
> {
constructor(props: DemoScreenProps) {
super(props);
}
componentDidMount() {
this.props.testThunk();
}
render() {
return null;
}
}
function mapStateToProps(state: any): StateProps {
return {};
}
function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
return {
testThunk: () => dispatch(thunkActionCreator())
};
}
export default connect<StateProps, DispatchProps, OwnProps>(
mapStateToProps,
mapDispatchToProps
)(DemoScreen);
店铺
import { createStore, applyMiddleware } from "redux";
import rootReducer from "./RootReducer";
import thunk from "redux-thunk";
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;
但是,我在使用 connect() 时遇到了两个问题。首先,我在 mapDispatchToProps 中声明 testThunk 时出现类型错误。
'(dispatch: Dispatch) => void' 类型的参数不可分配给'Action' 类型的参数。类型“(调度:调度)=> void”中缺少属性“类型”。我不知道如何处理这个问题,因为根据定义,thunk 与普通动作不同。
* 编辑 24/10/2018 * cf 答案如下,使用:
"@types/react-redux": "^6.0.9",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-redux": "^5.0.7",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"
解决方案
我终于设法获得了一个正确键入的连接组件,主要将此作为起点https://github.com/reduxjs/redux-thunk/blob/master/test/typescript.ts用于正确的异步操作创建者键入。关键是正确键入您的商店,并使用来自 redux-thunk 的 ThunkDispatch 和 ThunkAction。
商店.tsx
import { createStore, applyMiddleware, combineReducers } from "redux";
import { playground, IState } from "./reducer";
import thunk, { ThunkMiddleware } from "redux-thunk";
import { IActions } from "./actions";
export interface RootState {
playground: IState;
}
export type RootActions = IActions;
const rootReducer = combineReducers({ playground });
const store = createStore<RootState, RootActions, {}, {}>(
rootReducer,
applyMiddleware(thunk as ThunkMiddleware<RootState, RootActions>)
Actions.tsx
import { Action } from "redux";
import { ThunkAction } from "redux-thunk";
import { RootState, RootActions } from "./store";
type ThunkResult<R> = ThunkAction<R, RootState, undefined, RootActions>;
//Actions
export enum TestActionTypes {
THUNK_ACTION = "THUNK_ACTION",
}
export interface AsyncAction extends Action {
type: TestActionTypes.THUNK_ACTION;
}
export type IActions = AsyncAction;
//Action creator
export function testAsyncActionCreator(): ThunkResult<void> {
return (dispatch, getState) => {
console.log(getState);
dispatch({ type: TestActionTypes.THUNK_ACTION });
};
}
减速机.tsx
import { IActions, TestActionTypes } from "./actions";
import { Reducer } from "redux";
export interface IState {}
const defaultValue: IState = {};
export const playground: Reducer<IState, IActions> = (
state = defaultValue,
action
) => {
switch (action.type) {
default:
return state;
}
};
连接组件.tsx
...
import { connect } from "react-redux";
import { RootState, RootActions } from "./redux/store";
import { syncActionCreator, testGetState } from "./redux/actions";
import { ThunkDispatch } from "redux-thunk";
interface OwnProps {}
interface StateProps {}
interface DispatchProps {
test: () => void;
}
type Props = OwnProps & StateProps & DispatchProps;
class DumbContainer extends React.Component<Props> {
render() {
return (
...
);
}
}
const mapStateToProps = (state: RootState): StateProps => {
return {
text: state.playground.text
};
};
const mapDispatchToProps = (
dispatch: ThunkDispatch<RootState, undefined, RootActions>
): DispatchProps => {
return {
test: () => {
dispatch(testAsyncActionCreator());
}
};
};
export default connect<StateProps, DispatchProps, OwnProps, RootState>(
mapStateToProps,
mapDispatchToProps
)(DumbContainer);
我这里还有一个游乐场项目https://github.com/vbvxx/playground-reactnative-typescript
推荐阅读
- java - 通过 CLI 的 SOLR 4.6.0 索引并发问题 - org.apache.solr.common.SolrException:索引锁定以写入核心 XXX
- .net - 用于数据库视图和存储过程的 MVC EF 数据注释
- php - 为什么我的 php 中的多语言网站不能正常工作?
- java - java.lang.ClassCastException:java.lang.String 无法转换为 java.util.Map
- elasticsearch - Elasticsearch 中大型静态数据的分片和节点
- mysql - Docker-Compose - 无法使用命令--init-file 初始化 MySQL 数据库
- python - 如何迭代列表的每个元素以将特定列相乘以获得新的计算列
- javascript - 在 JavaScript 中填充每一行的标题
- linux - 如何执行logstash?(发生了错误)
- android - 为什么这个 SQLite 查询在 AS3 AIR (Android) 项目中不起作用?