将 React Redux 连接到 Typescript 中的组件

Question

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

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

export interface rootState {
  favourites: ImageThumbnail[]
}
 

我的组件：

...

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)

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

没有重载匹配这个调用。最后一个重载给出了以下 错误。 '(state: rootState) => { favourites: ImageThumbnail[]; 类型的参数}' 不可分配给类型参数 'MapStateToPropsParam'。 输入 '(state: rootState) => { favourites: ImageThumbnail[]; }' 不可分配给类型 'MapStateToPropsFactory'.

Answer 1

不要将所有这些通用参数传递给connect。它们通常应该被推断出来。

事实上，根据该页面，we specifically recommend using the ConnectedProps<T> technique to infer the type of props passed from connect to your component。

您还应该注意：

• 我们推荐使用our official Redux Toolkit package for writing your Redux logic
• 作为其中的一部分，you should infer the RootState type from your root reducer or store
• 我们推荐using the React-Redux hooks API as the default instead of connect，原因之一是它更容易与 TypeScript 一起使用