CODEWITHSUNDEEP
reactjstypescriptredux
user13960205
user13960205

Reputation: 53

react, redux with typescript error: Type '{}' is missing the following properties from type 'IProps': email, token

I am using HOC with redux, and I have been running into the error: Type '{}' is missing the following properties from type 'IProps': email, token. The HOC is supposed to inject the props(email and token) and state to the Lower component. But It is not passing them in this case. And the wrapper function (withLogin) does not appear in the react tree components in dev tools.

My HOC containing function (withLogin.tsx) looks like:

import * as React from "react";
import { connect, MapStateToProps } from "react-redux";
import { Dispatch } from 'redux';
import { propagateError } from "./actions";
import { Diff } from 'utility-types';

export interface IWithLoginProps {
  email: string;
  token: string;
}

type HocProps = 
   IDispatchProps & {
     // here you can extend ConnectedHoc with new props
      users: string
   };

interface IDispatchProps {
  cleanError(): void;
}

export default function WithLogin<T extends IWithLoginProps>(
  BaseComponenet
): React.ComponentType<HocProps> {
  class HOC extends React.Component<
  HocProps,
    {
      hash: string;
    }
  > {
    constructor(props) {
      super(props);
      this.state = {
        hash: window.top.location.hash          
       };
    }

    render() {
      return <BaseComponenet {...this.state} {...this.props} />;
    }
  }

  const mapDispatchToProps = (dispatch: Dispatch): IDispatchProps => {
    return {
      cleanError: () => dispatch(propagateError(null))
    };
  };

  // @ts-ignore
  return connect<{}, IDispatchProps, Diff<HocProps, IWithHistoryProps>, {}>(
    null,
    mapDispatchToProps
  )(HOC);
}

And my BaseComponent(App.tsx) looks like:

import React from "react";
import { connect } from "react-redux";
import { withLoginProps } from "./withLogin";

interface IStateProps {
  usernames: string[];
}

interface IProps extends IWithLoginProps {}

const App: React.StatelessComponent <IProps & IStateProps> = (props) => {
  return (
    <div>
        {props.users}
    </div>
  );
}

const mapStateToProps = (state: IRootState): IStateProps => {
  return {
    usernames: state.users
  };
};

export default connect<IStateProps, null, null, IRootState>(
  mapStateToProps, null)(withLogin(App));

My index.tsx:

import * as React from 'react';
import App from './App';

  const Root: React.StatelessComponent<{}> = () => (
    <div>
      <Provider store={store}>
          <App />
      </Provider>
    </div>
  );
  render(<Root />, document.getElementById(renderRoot));
};

Upvotes: 3

Views: 1317

Answers (1)

Yogi Valani
Yogi Valani

Reputation: 481

Looks like an issue with how you are importing the default import, that is try changing from:

import { withLoginProps } from "./withLogin";

to:

import withLoginProps from "./withLogin";

Upvotes: 3

Related Questions