'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 |
---|