使用 typescript 强烈键入 react-redux 连接 [英] Strongly typing the react-redux connect with typescript

问题描述

我在尝试为我的 React 组件键入参数时遇到错误.我想直接输入组件的 props 和 state 上的属性，但是当我使用 Redux 这样做时，当我将 mapStateToProps 传递给 connect 函数时出现错误.

这是组件代码:

import React, { Component } from 'react';从 'react-dom' 导入 ReactDOM；从redux"导入 { bindActionCreators };从'react-redux'导入{连接}；从 '../components/file-explorer/file-explorer' 导入 FileExplorer；import { ISideMenu, ISideMenuState } from '../models/interfaces/side-menu';类 SideMenu 扩展了 Component{使成为() {返回 (<div>{this.props.fileExplorerInfo !== null &&<FileExplorer fileExplorerDirectory={this.props.fileExplorerInfo.fileExplorerDirectory}/>}

);}}const mapStateToProps = (状态:ISideMenuState) =>{返回 {文件资源管理器信息:state.fileExplorer};};export default connect(mapStateToProps)(SideMenu);

所以错误出现在这一行:

export default connect(mapStateToProps)(SideMenu);

当我将鼠标悬停在该行中的mapStateToProps"一词上时，我看到了错误:

 '(state: ISideMenuState) => 类型的参数{ fileExplorerInfo: FileDirectoryTree |空值;}'不可分配给MapStateToPropsParam"类型的参数.输入'(状态:ISideMenuState)=>{ fileExplorerInfo: FileDirectoryTree |空值;}' 不是可分配到类型MapStateToProps".参数state"和state"的类型不兼容.类型{}"不是可分配到类型ISideMenuState".类型{}"中缺少属性fileExplorer".

这是我在 react 组件中使用的两个接口:

导出接口 ISideMenu {fileExplorerInfo: FileExplorerReducerState |空值;}导出接口 ISideMenuState {文件资源管理器:文件目录树 |空值;}

对此错误的任何见解将不胜感激！

解决方案

当使用泛型时，你会弄错接口的位置:

当你声明你的 React 组件时:

class Comp extends Component

ICompProps 和 ICompState 分别是组件的 props 和内部状态.

使用连接时:

connect

IMapStateToProps 表示您的 mapStateToProps() 函数返回的内容.IMapDispatchToProps 表示您的 mapDispatchToProps() 函数返回的内容.ICompProps 代表你的 React 组件道具(同上)IReduxState 代表你的 App 的 Redux State

所以在您的特定示例中:

在声明 React 组件时:

class SideMenu 扩展了 Component

使用 ISideMenu 作为道具，使用 {}(空状态)作为状态，因为您不使用任何状态.

使用连接时:

connect(mapStateToProps)(SideMenu);

你可以使用 ISideMenu 作为你的 React 组件 props 和 mapStateToProps 返回的对象.但在实践中，最好创建 2 个单独的界面.

在我的应用程序中，我通常不会被打扰输入 mapStateToProps 返回对象，所以我只需使用:

connect<{}, {}, ISideMenu, ISideMenuState>(mapStateToProps)(SideMenu);

I am getting an error trying to type the parameters for my react component. I would like to stronly type what properties will be on the props and state of a component, but when I do so using Redux, I am getting an error when I pass mapStateToProps to the connect function.

This is the component code:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import FileExplorer from '../components/file-explorer/file-explorer';
import { ISideMenu, ISideMenuState } from '../models/interfaces/side-menu';

    class SideMenu extends Component<ISideMenu, ISideMenuState> {
        render() {
            return (
                <div>
                    {this.props.fileExplorerInfo !== null &&
                        <FileExplorer fileExplorerDirectory={this.props.fileExplorerInfo.fileExplorerDirectory}/>
                    }
                </div>
            );
        }
    }

    const mapStateToProps = (state: ISideMenuState) => {
        return {
            fileExplorerInfo: state.fileExplorer
        };
    };

    export default connect<ISideMenu, null, ISideMenuState>(mapStateToProps)(SideMenu);

So the error occurs on this line:

export default connect<ISideMenu, null, ISideMenuState>(mapStateToProps)(SideMenu);

and when I hover over the word "mapStateToProps" in that line I am seeing the error:

Argument of type '(state: ISideMenuState) => { fileExplorerInfo: FileDirectoryTree | null; }'
is not assignable to parameter of type 'MapStateToPropsParam<ISideMenu, ISideMenuState, {}>'.
  Type '(state: ISideMenuState) => { fileExplorerInfo: FileDirectoryTree | null; }' is not
assignable to type 'MapStateToProps<ISideMenu, ISideMenuState, {}>'.
    Types of parameters 'state' and 'state' are incompatible.
      Type '{}' is not
assignable to type 'ISideMenuState'.
        Property 'fileExplorer' is missing in type '{}'.

And these are the two interfaces I am using in the react component:

export interface ISideMenu {
    fileExplorerInfo: FileExplorerReducerState | null;
}

export interface ISideMenuState {
    fileExplorer: FileDirectoryTree | null;
}

Any insight into this error will be greatly appreciated!

解决方案

When using generics, you are getting the place of interfaces wrong:

When you declare your React component:

class Comp extends Component<ICompProps, ICompState>

With ICompProps and ICompState are your component's props and internal state respectively.

When you use connect:

connect<IMapStateToProps, IMapDispatchToProps, ICompProps, IReduxState>

IMapStateToProps represents what is returned by your mapStateToProps() function. IMapDispatchToProps represents what is returned by your mapDispatchToProps() function. ICompProps represents your React component props (same as above) IReduxState represents your App's Redux State

So in your particular example:

When declaring your React component:

class SideMenu extends Component<ISideMenu, {}>

Use ISideMenu for the props and {} (empty state) for the state as you don't use any state.

When using connect:

connect<ISideMenu, {}, ISideMenu, ISideMenuState>(mapStateToProps)(SideMenu);

You can use ISideMenu as both your React component props and the object returned by mapStateToProps. But in practice it might be best to create 2 separate interfaces.

In my apps, I usually can't be bothered typing the mapStateToProps return object so I simply use:

connect<{}, {}, ISideMenu, ISideMenuState>(mapStateToProps)(SideMenu);

这篇关于使用 typescript 强烈键入 react-redux 连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！