首页 文章

Typescript返回Redux类型中的错误

提问于
浏览
0

快速问题,我正在使用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 回答

  • 1

    你的 mapStateToProps() 应该返回一种 IMapStateToProps 类型,即它期望一个具有 usernamepasswordserviceCodefetching 属性的对象 . 但是,您只使用一个属性 usermapStateToProps() 返回一个对象 .

    这是回答你问的问题,但是你的代码有很多问题,我不确定你是否知道 . 例如, AppStateTypeIMapStateToProps 具有我期望的奇怪定义:

    export type AppStateType = {
        username: string;
        password: string;
        serviceCode: number;
        fetching: boolean;
    };
    

    HomeScreen 应该扩展类似 React.Component<IMapStateToProps & { setUser: () => void}>setUser 的定义 .

    您的 connect()mapDispatchToProps 的类型为 Object . 这不准确,因为它实际上是具有 setUser 功能的对象 .

相关问题