CODEWITHSUNDEEP
typescriptreact-nativereduxreact-redux
LizHamer
LizHamer

Reputation: 81

Hooking up React Redux to a Component in Typescript

I am looking to hook up React Redux to my component in typescript. I am using these docs as a template.

I have the following type defining the state I have in the Redux store (there is only one):

export interface rootState {
  favourites: ImageThumbnail[]
}

My component:

...

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)

mapState within the connect function is producing the following error:

No overload matches this call. The last overload gave the following error. Argument of type '(state: rootState) => { favourites: ImageThumbnail[]; }' is not assignable to parameter of type 'MapStateToPropsParam<StateProps, OwnProps, DefaultRootState>'. Type '(state: rootState) => { favourites: ImageThumbnail[]; }' is not assignable to type 'MapStateToPropsFactory<StateProps, OwnProps, DefaultRootState>'.

Upvotes: 0

Views: 254

Answers (1)

markerikson
markerikson

Reputation: 67469

Don't pass all those generic args to connect. They should generally be inferred.

In fact, per that page, we specifically recommend using the ConnectedProps<T> technique to infer the type of props passed from connect to your component.

You should also note that:

Upvotes: 2

Related Questions