Typescript - Rendering Connected Components

Question

Using TypeScript and React/Redux, I have typed a ConnectedComponent. But when I try to render that component, TypeScript is throwing an error saying that the required props aren't passed.

Ex.

interface Props extends MapStateProps {

}

class App extends React.Component<Props, {}> {
  render(): JSX.Element {
    return (
      <>
        <Router>
          <Switch>
            <Route path="/" component={Dashboard} />
          </Switch>
        </Router>
      </>
    );
  }
}

interface MapStateProps {
  user: UserState;
}

const MapStateToProps = (state: AppState): MapStateProps => ({
  user: state.user,
});

const connectedApp = connect(MapStateToProps, null)(App);

export {
  connectedApp as App,
};

Then when I render the component like:

<App />

It says that App requires the 'user' prop. How can I do this without setting the user prop as optional?

gautamits · Accepted Answer · 2020-04-24 20:39:52Z

1

Please try this and see if it helps.

interface UserState{}
interface AppState{
  user: UserState;
}
interface MapStateProps {
  user: UserState;
}
interface Props extends MapStateProps {}

class App2 extends React.Component<Props, {}> {
  render(): JSX.Element {
    return (
      <div>
          App2
      </div>
    );
  }
}

const MapStateToProps = (state: AppState): MapStateProps => ({
  user: state.user,
});

export default connect(MapStateToProps, null)(App2);

edited Apr 24, 2020 at 20:39

answered Apr 24, 2020 at 19:11

gautamits

1,3029 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hairyhendrix Over a year ago

I tried that as well, but can never get that to work. It always says that mapStateToProps doesn't satisfy StateProps.

gautamits Over a year ago

@hairyhendrix I have modified code and this one was working for me. It seems your MapStateProps interface and AppState interface user type is different in both.

Francesc Montserrat · Accepted Answer · 2020-04-24 18:27:04Z

0

Replacing

export {
  connectedApp as App,
};

With the default export:

export default connectedApp;

And then the import

import {App} from './App';

For

import App from './App';

answered Apr 24, 2020 at 18:27

Francesc Montserrat

3491 silver badge8 bronze badges

1 Comment

hairyhendrix Over a year ago

I tried that before, and again now, and unfortunately it has the same effect.

zakaria amine · Accepted Answer · 2021-06-25 21:48:15Z

0

Here is what worked for me:

//...

const connectedApp = connect(MapStateToProps, null)(App);

export default connectedApp ;
export { connectedApp as App};

answered Jun 25, 2021 at 21:48

zakaria amine

3,7322 gold badges23 silver badges40 bronze badges

Collectives™ on Stack Overflow

Typescript - Rendering Connected Components

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related