'is it possible to optimize the mapStateToProps in react function component in UMI application

I am write the function code using mapStateToProps like this:

const mapStateToProps = ({articles, loading}: {articles: IArticleState, loading: Loading}) => {
   return {
      articles,
      loading: loading.models.articles
  }
}
const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
      dispatch
  }
}

I have to write the same code in every component, this is the full code looks like:

import React from 'react';
import { useLocation} from 'react-router-dom';

import { ArticleDetailProps, connect, Dispatch, IArticleState, Loading } from 'umi';

const ArticleDetail: React.FC<ArticleDetailProps> = ({articles, dispatch, loading}) => {

  const location = useLocation();

  React.useEffect(()=>{
      dispatch({
        type: 'articles/getArticleDetail',
        payload: (location as any).query.id
      });
  },[]);

  let articleData = articles.article;
  return (
   <div>
      <h2>{articleData.title}</h2>
     <div style={{fontSize:'16px'}} dangerouslySetInnerHTML={{__html: articleData.content}} />
   </div>
  );
};


const mapStateToProps = ({articles, loading}: {articles: IArticleState, loading: Loading}) => {
   return {
      articles,
      loading: loading.models.articles
  }
}
const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
      dispatch
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ArticleDetail);

is it possible to write this code in one place or make it more shorter? I think copy and paste this code is not a good practice.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source