Я пытаюсь перейти с компонента на основе класса на функциональный компонент.Это подключенный компонент, использующий mapState
.
Вот что у меня было:
import { connect } from 'react-redux'
import { fetchArticles } from '../shared/actions/articleActions';
import { AppState } from '../shared/types/genericTypes';
import Article from '../shared/models/Article.model';
type Props = {
articles?: Article[]
fetchArticles?: any,
};
const mapState = (state: AppState, props) => ({
articles: state.articleReducers.articles,
...props
});
const actionCreators = {
fetchArticles,
};
class NewsArticles extends Component<Props> {
componentDidMount() {
if (!this.props.articles || !this.props.articles.length) {
this.props.fetchArticles();
}
}
render() {
return (...);
}
}
export default connect(mapState, actionCreators)(NewsArticles)
Вот что у меня сейчас:
// same imports except for FC and useEffec from react.
type Props = {
articles?: Article[];
fetchArticles?: any;
};
const mapState = (state: AppState, props: Props) => ({
articles: state.articleReducers.articles,
...props,
});
const actionCreators = {
fetchArticles,
};
const NewsArticles: FC<Props> = ({ articles, fetchArticles }) => {
useEffect(() => {
if (!articles || !articles.length) {
fetchArticles();
}
}, []);
return (...);
};
export default connect(mapState, actionCreators)(NewsArticles);
Основная проблемаУ меня есть реквизиты.
Раньше они были такими
const mapState = (state: AppState, props) => ({
articles: state.articleReducers.articles,
...props
});
И использовались вот так:
componentDidMount() {
if (!this.props.articles || !this.props.articles.length) {
this.props.fetchArticles();
}
}
Теперь, когда у меня есть функциональный компонент, яполучить это
const mapState = (state: AppState, props: Props) => ({
articles: state.articleReducers.articles,
...props,
});
И использовать так:
useEffect(() => {
if (!articles || !articles.length) {
fetchArticles();
}
}, []);
Так как props
будет работать теперь, когда articles
и fetchArticles
не называются как this.props.articles
и толькоarticles
так, имеет ли смысл выкладывать реквизит …props
на mapState
?