快速问题,我正在使用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);
我的减速机:
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
属性的对象 . 但是,您只使用一个属性user
从mapStateToProps()
返回一个对象 .这是回答你问的问题,但是你的代码有很多问题,我不确定你是否知道 . 例如,
AppStateType
和IMapStateToProps
具有我期望的奇怪定义:HomeScreen
应该扩展类似React.Component<IMapStateToProps & { setUser: () => void}>
或setUser
的定义 .您的
connect()
中mapDispatchToProps
的类型为Object
. 这不准确,因为它实际上是具有setUser
功能的对象 .