强烈键入带有打字稿的react-redux connect

强烈键入带有打字稿的react-redux connect

当使用泛型时，您会发现错误的接口位置：

声明React组件时：

class Comp extends Component<ICompProps, ICompState>

随着

ICompProps

和

ICompState

分别为您的组件的道具和内部状态。

使用connect时：

connect<IMapStateToProps, IMapDispatchToProps, ICompProps, IReduxState>

IMapStateToProps

表示

mapStateToProps()

函数返回的内容。

IMapDispatchToProps

表示

mapDispatchToProps()

函数返回的内容。

ICompProps

代表您的React组件道具（与上面相同）

IReduxState

代表您的应用程序的Redux状态

因此，在您的特定示例中：

在声明您的React组件时：

class SideMenu extends Component<ISideMenu, {}>

使用

ISideMenu

的道具和

{}

（空状态）的状态，你不使用任何状态。

使用连接时：

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

您既可以

ISideMenu

用作React组件的prop，也可以用作所返回的对象

mapStateToProps

。但实际上，最好创建两个单独的接口。

在我的应用中，通常不必打扰键入

mapStateToProps

返回对象，因此我只需使用：

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