Блог

Вот компонент, который при желании может отображать либо строку (не будучи подключенным к хранилищу Redux), либо поле выбора.

 export function Content(props: ContentProps) {
  const { language } = props;

  if (!props.setLanguage) {
    return (
      <div>{language}</div>
    );
  }

  return (
    <Select
      language={language}
      languages={languages}
      onChange={e => {
        props.setLanguage!(e.target.value);
      }}
    />
  );
}
  

Этот код работает отлично

 const mapStateToProps = (state: RootState) => ({
  language: state.language,
});

const mapDispatch = {
  setLanguage,
};

const connector = connect(mapStateToProps, mapDispatch);

const ConnectedContent = connector(Content);

function App() {
  return (
    <ConnectedContent />
  );
}
  

Но дело в том, что мне понадобились бы дополнительные усовершенствования, поэтому соединитель должен быть повторно используемым, что-то вроде

 //type PropsFromRedux = ConnectedProps<typeof connector>;

interface LoadingProps {
  loading?: boolean;
}

const withLoading = <P extends {}>(Component: React.ComponentType<P>) => (props: P amp; LoadingProps) => (
  <>
    {props.loading amp;amp; <div>Loading</div>}
    <Component {...props as P} />
  </>
);

function getConnectedComponent(Component: React.ComponentType) {
  const ComponentWithLoading = withLoading(Component);

  return connector(ComponentWithLoading);
}

const ConnectedContent = getConnectedComponent(Content);
  

Но я не знаю, как правильно добавлять типы / обобщения в функцию getConnectedComponent. С выводом я получаю

 Error:(24, 48) TS2345: Argument of type '(props: ContentProps) => Element' is not assignable to parameter of type 'ComponentType<{}>'.
  Type '(props: ContentProps) => Element' is not assignable to type 'FunctionComponent<{}>'.
    Types of parameters 'props' and 'props' are incompatible.
      Property 'language' is missing in type '{ children?: ReactNode; }' but required in type 'ContentProps'.
  

Рабочий пример включен https://codesandbox.io/s/elegant-snowflake-b5r89
Также отправлено на GitHub https://github.com/hitrov/reusable-redux-connector

Я не уверен, что вы подразумеваете под «соединитель должен быть повторно используемым» или какие «дополнительные улучшения» вы имеете в виду. Он уже повторно используется. Функция, возвращаемая из connect(mapState, mapDispatch) , готова принять любой компонент, который вы передали, поэтому он уже выполняет то, что ваш условный getConnectedComponent хочет сделать.