Typescript 在 Redux 类型中返回错误
2018-03-14
337
快速提问,我正在用 typescript 和 redux 编写一个 React-native 应用程序。尝试 connect() 时遇到错误,似乎找不到错误的解决方案。我假设是我做错了什么,但看了几个小时后还是找不到原因。
错误:
Argument of type '(state: AppStateType) => { user: AppStateType; }' is not assignable to parameter of type 'MapStateToPropsParam<IMapStateToProps, void, {}>'.
Type '(state: AppStateType) => { user: AppStateType; }' is not assignable to type 'MapStateToProps<IMapStateToProps, void, {}>'.
Types of parameters 'state' and 'state' are incompatible.
Type '{}' is not assignable to type 'AppStateType'.
Property 'username' is missing in type '{}'.
尝试连接(mapStateToProps)时:
export default connect<IMapStateToProps, Object, void>(*mapStateToProps*, mapDispatchToProps)(HomeScreen);
我的 Reducer:
import * as Immutable from 'seamless-immutable';
// our defined @types
import { AppStateType, ActionType } from '../../@types';
const appState: AppStateType = {
username: '',
password: '',
serviceCode: 0,
fetching: false
};
// enforce that state is immutable
export const initialState = Immutable.from(appState);
const userReducer = (state = initialState, action: ActionType) => {
switch (action.type) {
case 'FETCH_USER':
state = {
...state,
fetching: false
};
break;
case 'SET_USER':
state = {
...state,
fetching: false
};
break;
default:
break;
}
return state;
};
export default userReducer;
@types 文件:
// app state type
export type AppStateType = {
username: '';
password: '';
serviceCode: 0;
fetching: false;
};
export interface InterfaceSetUser {
type: 'SET_USER';
payload?: {};
}
export interface InterfaceFetchUser {
type: 'FETCH_USER';
payload?: {};
}
export type ActionType = InterfaceSetUser | InterfaceFetchUser;
操作:
import { Dispatch } from 'react-redux';
export function SetUser(user: Object) {
return function(dispatch: Dispatch<{}>) {
dispatch({
type: 'SET_USER',
payload: user
});
};
}
组件:
import * as React from 'react';
import { View, Text } from 'react-native';
import { AppStateType, ActionType } from '../@types';
import { Dispatch, connect } from 'react-redux';
import { SetUser } from './../redux/actions/user.actions';
import { bindActionCreators } from 'redux';
interface IMapStateToProps {
username: '';
password: '';
serviceCode: 0;
fetching: false;
}
const mapStateToProps = (state: AppStateType) => ({
user: state
});
const mapDispatchToProps = (dispatch: any) => {
return bindActionCreators({
setUser: SetUser
}, dispatch);
};
class HomeScreen extends React.Component {
render() {
return(
<View>
<Text>
Home Screen
</Text>
</View>
);
}
}
export default connect<IMapStateToProps, Object, void>(mapStateToProps, mapDispatchToProps)(HomeScreen);
我对 Typescript 和 Redux 还比较陌生,因此无法理解这个问题。您能给我指出正确的方向吗?
1个回答
您的
mapStateToProps()
应返回
IMapStateToProps
类型,即,它期望一个具有属性
username
、
password
、
serviceCode
和
fetching
的对象。但是,您从
mapStateToProps()
返回的对象只有一个属性
user
。
这回答了您提出的问题,但是您的代码中存在许多问题,我不确定您是否意识到了。例如,
AppStateType
和
IMapStateToProps
具有我期望的奇怪定义:
export type AppStateType = {
username: string;
password: string;
serviceCode: number;
fetching: boolean;
};
HomeScreen
应该扩展类似
React.Component<IMapStateToProps & 的内容{ setUser: () => void}>
或
setUser
的任何定义。
您的
connect()
中的
mapDispatchToProps
类型为
Object
。这并不准确,因为它实际上是一个具有
setUser
函数的对象。
Ciarán Tobin
2018-03-14