TypeScript Error Type '{}' is missing the following properties from type

user_3604796 0
Viewed 3879

I'm generally new to TypeScript and I'm receiving this error .

Type '{}' is missing the following properties from type 'Pick<PropsI, "loadUser" | "user">': loadUser, user

The above error is coming within App.text and pointing to <AppRouter/>

I'm confused to why I'm getting this and what the possible fix is? Im assuming I'm not declaring something correctly inside of the app router but I cant seem to figure out what's wrong or the error I'm recieving?

App.tsx

import AppRouter from './router/AppRouter'

const App: React.FC = () => {
  return (
    <Fragment>
      <AppRouter />
    </Fragment>
  )
}

export default App

App Router


import React, {ExoticComponent, Fragment, useEffect} from 'react'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import FreeTextView from '../components/analytics/dashboard/freeTextView/FreeTextView'
import {connect, useDispatch, useSelector} from 'react-redux'
import {Nav, IconSvgs} from '@pxhub/shared-components'
import {AppState, UserI, AccessRecordsI} from '../store/actions/Types'
import {loadUser} from '../store/actions/UserActions'

interface PropsI {
  loadUser: () => void
  user: UserI
}

// Defualt Page
const Page = () => {
  return (
    <Fragment>
      <Switch>
        <Route path="/freeview" component={FreeTextView} />
      </Switch>
    </Fragment>
  )
}

// App Router
export const AppRouter: React.FC<PropsI> = ({loadUser, user}: PropsI) => {
  const userAccess = user.accessRecords.map((accessRecord: AccessRecordsI) => {
    return accessRecord.Access_Transaction
  })

  useEffect(() => {
    loadUser()
  })

  return (
    <Fragment>
      <IconSvgs />
      <Nav
        user={user}
        userAccess={userAccess}
        urlPrefix={process.env.REACT_APP_URL_PREFIX}
      />
      <Router>
        <Switch>
          <Route path="/" component={Page} />
        </Switch>
      </Router>
    </Fragment>
  )
}

const dispatch = useDispatch()

const mapDispatchToProps = () => () => {
  dispatch(loadUser())
}
const mapStateToProps = useSelector((state: AppState) => state.user)

export default connect(mapStateToProps, mapDispatchToProps)(AppRouter)
redux typescript reactjs types
2 Answers

You declared AppRouter as requiring the props loaduser and user, but then you called it without those props in App.tsx.

EDIT: Although not the cause of the specific TS error identified in the question, as noted in the comments, it can also cause problems to combine useSelector and mapStateToProps or useDispatch and mapDispatchToProps. These days you likely want to just use the hooks.

user_142262700

I'm not sure about the mapDispatchToProps syntax.

Should't it be something like this?

const mapDispatchToProps = () => {
  dispatch(loadUser())
}
user_134570920
Related