TypeScript with React Redux, connect type

Question

I have a HOC that is connected to redux like this way:

const withSignIn = (WrappedComponent: React.FC<WithSignInProps>) => {
  const mapStateToProps = ({ auth }: AuthRootState) => ({
    error: auth.error,
    loading: auth.loading
  });

  const mapDispatchToProps = {
    signIn
  };

  return connect(mapStateToProps, mapDispatchToProps)(WrappedComponent);
};

export default withSignIn;

I'm missing return type on function withSignIn but I don't know what type should I cast my function, it's returning a connect() function there, any hint?

Alexandre Catalano · Accepted Answer · 2020-11-09 20:38:37Z

1

I think what you're looking is there https://redux.js.org/recipes/usage-with-typescript#typing-the-connect-higher-order-component

to be more accurate this lines

const connector = connect(mapState, mapDispatch)

// The inferred type will look like:
// {isOn: boolean, toggleOn: () => void}
type PropsFromRedux = ConnectedProps<typeof connector>
type Props = PropsFromRedux & {
  backgroundColor: string
}

So I guess what you return is

React.FC<WithSignInProps & PropsFromRedux>

I didn't have enough code to try it myself, tell me if it works for you :)

answered Nov 9, 2020 at 20:38

Alexandre Catalano

7724 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

TypeScript with React Redux, connect type

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related