将React Redux连接到Typescript中的组件

我希望在typescript中将React Redux连接到我的组件。我使用这些作为模板

我有以下类型定义我在Redux存储中的状态（只有一个）：

我的组成部分：

...

interface StateProps {
  favourites: NasaImageThumbnail[]
}

interface DispatchProps {
  addFavourite: () => void
  removeFavourite: () => void
}

interface OwnProps {
  ...
}

const mapState = (state: rootState) => ({
  favourites: state.favourites
})

const mapDispatch = {
  addFavourite: () => ({ type: 'ADD_FAVOURITE' }),
  removeFavourite: () => ({ type: 'REMOVE_FAVOURITE' })
}

type combinedProps = StateProps & DispatchProps & OwnProps

//Component body

export default connect<StateProps, DispatchProps, OwnProps>(
  mapState,
  mapDispatch
)(Component)

。。。
接口状态道具{
最喜爱：NasaImageThumbnail[]
}
界面分派道具{
addFavorite:（）=>void
RemoveFavorite:（）=>void
}
界面道具{
...
}
常量映射状态=（状态：根状态）=>({
收藏夹：state.favorites
})
常量映射分派={
AddFavorite:（）=>（{type:'ADD_favorite'}），
RemoveFavorite:（）=>（{type:'REMOVE_Favorite'}）
}
类型combinedProps=StateProps&DispatchProps&OwnProps
//组件体
导出默认连接(
mapState，
地图发送
)（组成部分）

connect函数中的mapState产生以下错误：

没有与此调用匹配的重载。最后一次重载给出了以下结果 错误。 类型为“（state:rootState）=>{Favorites:ImageThumbnail[]；}”的参数不能分配给类型为的参数 “MapStateToPropsParam”。 Type'（state:rootState）=>{favorities:image缩略图[]；}不可分配给类型“MapStateToPropsFactory”

---

不要将所有这些通用参数传递给

connect

。它们通常应该被推断出来

事实上，每一页

您还应注意：

• 我们建议使用
• 作为其中的一部分
• 我们推荐，其中一个原因是它更容易与TypeScript一起使用

---

不要将所有这些通用参数传递给

connect

。它们通常应该被推断出来
事实上，每一页
您还应注意：
• 我们建议使用
• 作为其中的一部分
• 我们推荐，其中一个原因是它更容易与TypeScript一起使用

---

关于推荐更喜欢redux挂钩的古玩。我是React Redux新手，但我正在使用Redux工具包开发一个大型项目。我对钩子最大的担忧是组件知道根状态形状，如果不更改每个组件中的选择器，我就不能重用它或重构代码。目前，在创建状态切片后，我正在连接切片文件中的组件，因此如果我确实更改状态，则所有所需的连接更新都在一个位置。我关心的是组件的可重用性和状态形状的耦合。也许我的担心被误导了？这个问题是可以理解的，但不是一个严重的担心。无论您使用的是

connect+mapState

还是

useSelector

，都会出现“选择器状态形状”问题，因为它们都将根Redux state对象作为唯一参数。没有区别。如果您非常关心避免在组件中重写匿名选择器，请创建一个可在许多组件中调用的可重用选择器，以便在状态形状发生更改时只需编辑减速器和该选择器。有关此操作的更多详细信息，请参阅我的文章和。这也是使用TypeScript的一个很好的理由。哦，我会避免在切片文件中定义组件连接。绝对不是惯用的方法，而且我不记得曾经见过其他人这样做。切片文件中的连接是我做的，因为我不想将项目的其他部分导入到我的组件中（除了我在每个功能的另一个文件中保留的接口）。我的推理是，如果我在一个文件中定义我的状态片，那么连接的组件与状态关联，那么为什么我要在组件文件中进行连接？看到组件文件底部的connect对我来说从来都不是一件好事，尽管我确实看到过这样的例子。我完全不喜欢redux react，感谢redux-Toolkit.Curios推荐我更喜欢redux挂钩。我是React Redux新手，但我正在使用Redux工具包开发一个大型项目。我对钩子最大的担忧是组件知道根状态形状，如果不更改每个组件中的选择器，我就不能重用它或重构代码。目前，在创建状态切片后，我正在连接切片文件中的组件，因此如果我确实更改状态，则所有所需的连接更新都在一个位置。我关心的是组件的可重用性和状态形状的耦合。也许我的担心被误导了？这个问题是可以理解的，但不是一个严重的担心。无论您使用的是

connect+mapState

还是

useSelector

，都会出现“选择器状态形状”问题，因为它们都将根Redux state对象作为唯一参数。没有区别。如果您非常关心避免在组件中重写匿名选择器，请创建一个可在许多组件中调用的可重用选择器，以便在状态形状发生更改时只需编辑减速器和该选择器。有关此操作的更多详细信息，请参阅我的文章和。这也是使用TypeScript的一个很好的理由。哦，我会避免在切片文件中定义组件连接。绝对不是惯用的方法，而且我不记得曾经见过其他人这样做。切片文件中的连接是我做的，因为我不想将项目的其他部分导入到我的组件中（除了我在每个功能的另一个文件中保留的接口）。我的推理是，如果我在一个文件中定义我的状态片，那么连接的组件与状态关联，那么为什么我要在组件文件中进行连接？看到组件文件底部的connect对我来说从来都不是一件好事，尽管我确实看到过这样的例子。我完全不需要redux反应，感谢redux工具包。

...

interface StateProps {
  favourites: NasaImageThumbnail[]
}

interface DispatchProps {
  addFavourite: () => void
  removeFavourite: () => void
}

interface OwnProps {
  ...
}

const mapState = (state: rootState) => ({
  favourites: state.favourites
})

const mapDispatch = {
  addFavourite: () => ({ type: 'ADD_FAVOURITE' }),
  removeFavourite: () => ({ type: 'REMOVE_FAVOURITE' })
}

type combinedProps = StateProps & DispatchProps & OwnProps

//Component body

export default connect<StateProps, DispatchProps, OwnProps>(
  mapState,
  mapDispatch
)(Component)