reactjs - thunk 调度的正确 TypeScript 类型?
问题描述
我有一个异步的 redux 操作,所以正在使用 thunk 中间件。
我有一个组件的mapStateToProps
,mapDispatchToProps
和connect
功能如下:
const mapStateToProps = (store: IApplicationState) => {
return {
loading: store.products.loading,
products: store.products.products
};
};
const mapDispatchToProps = (dispatch: any) => {
return {
getAllProducts: () => dispatch(getAllProducts())
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(ProductsPage);
这一切都有效,但我想知道是否可以替换any
调度参数中的类型mapDispatchToProps
?
我试过ThunkDispatch<IApplicationState, void, Action>
,但在连接函数上得到以下 TypeScript 错误:
Argument of type 'typeof ProductsPage' is not assignable to parameter of type 'ComponentType<Matching<{ loading: boolean; products: IProduct[]; } & { getAllProducts: () => Promise<void>; }, IProps>>'.
Type 'typeof ProductsPage' is not assignable to type 'ComponentClass<Matching<{ loading: boolean; products: IProduct[]; } & { getAllProducts: () => Promise<void>; }, IProps>, any>'.
Types of property 'getDerivedStateFromProps' are incompatible.
Type '(props: IProps, state: IState) => { products: IProduct[]; search: string; }' is not assignable to type 'GetDerivedStateFromProps<Matching<{ loading: boolean; products: IProduct[]; } & { getAllProducts: () => Promise<void>; }, IProps>, any>'.
Types of parameters 'props' and 'nextProps' are incompatible.
Type 'Readonly<Matching<{ loading: boolean; products: IProduct[]; } & { getAllProducts: () => Promise<void>; }, IProps>>' is not assignable to type 'IProps'.
Types of property 'getAllProducts' are incompatible.
Type '() => Promise<void>' is not assignable to type '() => (dispatch: Dispatch<AnyAction>) => Promise<void>'.
Type 'Promise<void>' is not assignable to type '(dispatch: Dispatch<AnyAction>) => Promise<void>'.
Type 'Promise<void>' provides no match for the signature '(dispatch: Dispatch<AnyAction>): Promise<void>'.
是否可以在中替换any
调度参数的类型mapDispatchToProps
?
解决方案
这个设置对我来说效果很好:
// store.ts
//...
export type TAppState = ReturnType<typeof rootReducer>;
export type TDispatch = ThunkDispatch<TAppState, void, AnyAction>;
export type TStore = Store<TAppState, AnyAction> & { dispatch: TDispatch };
export type TGetState = () => TAppState;
//...
const store: TStore = createStore(
rootReducer,
composeEnhancers(applyMiddleware(...middleware), ...enhancers)
);
export default store;
我的设置在哪里rootReducer
看起来像这样const rootReducer = createRootReducer(history);
// createRootReducer.ts
import { combineReducers, Reducer, AnyAction } from 'redux';
import { History } from 'history';
import {
connectRouter,
RouterState,
LocationChangeAction,
} from 'connected-react-router';
// ... here imports of reducers
type TAction = AnyAction & LocationChangeAction<any>;
export type TRootReducer = Reducer<
{
// ... here types of the reducer data slices
router: RouterState;
},
TAction
>;
const createRootReducer = (history: History): TRootReducer =>
combineReducers({
// ... here actual inserting imported reducers
router: connectRouter(history),
});
export default createRootReducer;
然后在连接组件中
import { connect } from 'react-redux';
import Add, { IProps } from './Add'; // Component
import { TDispatch, TAppState } from '../../store';
type TStateProps = Pick<
IProps,
'title' | 'data' | 'loading'
>;
const mapStateToProps = (
state: TAppState,
): TStateProps => {
// ... here you have typed state :)
// and return the TStateProps object as required
return {
loading: state.someReducer.loading,
//...
}
}
type TDispatchProps = Pick<IProps, 'onSave'>;
const mapDispatchToProps = (
dispatch: TDispatch,
): TDispatchProps => {
// here you have typed dispatch now
// return the TDispatchProps object as required
return {
onSave: (): void => {
dispatch(saveEntry()).then(() => {
backButton();
});
},
}
}
至于 thunk 动作我做如下
// this is a return type of the thunk
type TPromise = Promise<ISaveTaskResponse | Error>;
export const saveEntry = (): ThunkAction<
TPromise, // thunk return type
TAppState, // state type
any, // extra argument, (not used)
ISaveEntryAction // action type
> => (dispatch: TDispatch, getState: TGetState): TPromise => {
// use getState
// dispatch start saveEntry action
// make async call
return Axios.post('/some/endpoint', {}, {})
.then((results: { data: ISaveTaskResponse; }): Promise<ISaveTaskResponse> => {
// get results
// you can dispatch finish saveEntry action
return Promise.resolve(data);
})
.catch((error: Error): Promise<Error> => {
// you can dispatch an error saveEntry action
return Promise.reject(error);
});
};
推荐阅读
- c++ - 值包装器的类构造函数优先级与可变参数模板构造函数
- mysql - MYSQL 针对具有特定日期的表测试一条记录中的多个日期
- mysql - 同一个 SQL 语句中的多个条件计数
- javascript - 如何使用 Angular 6 在此代码中从 C# 更改函数 AddDays?
- ruby-on-rails - Rails:创建的参数未正确保存
- vue.js - 从 vuex 过滤的数据在 vue 组件中没有反应
- sql - 如何在 SQL 中按年份汇总数据?
- sql - 如何使用 Django orm 创建临时布尔字段
- asp.net - 将 texbox 文本保存到 ASP.NET 网站中的 SQL Server
- java - Elasticsearch 仅重新索引某些 _source 参数