Можно ли использовать один компонент для разных данных в React?

Question

[Дмитрий]

Здравствуйте, есть две одинаковые страницы. Внешний вид, стили, данные по типу, все идентичное. Отличие только в том что там разные данные. Одна - страница "Акции", вторая - страница "А вы знали". Сначала хотел создать отдельный компонент. Но потом подумал что можно для второй страницы использовать тот же компонент, только делать разные запросы в зависимости от slug this.props.match.path

Код уже готового компонента

import React, { Component } from 'react';
import Breadcrumbs from '../../../helpers/breadcrumbs';
import StockSingle from './StockSingle';
import Preloader from '../../../helpers/preloader';
import $ from 'jquery';
import stocksPageMagnificPopupInit from './stocksPageMagnificPopupInit';


const NoStocksMessage = () =>  <p className="woocommerce-noreviews" style={{minHeight: 100}}>Акций пока нет.</p>;

class StockPage extends Component {
    componentDidMount(){
        const path = this.props.match.path;

        console.log( path );

        const {setAllStocks} = this.props;
        setAllStocks(path);

        this.$el = $('.offers__items');
        stocksPageMagnificPopupInit(this.$el);
    }

    render(){
        const {isStocksReady, isStocksLoading, stocksErrors, stocksList, stockAttachment} = this.props;

        const matchPath = this.props.match.path;
        
        return (
            <React.Fragment>
                <div className="container">
                    <div className="row">
                        <div className="col-xs-12">
                            <Breadcrumbs />
                        </div>
                    </div>
                </div>
                <div className="container">
                    <div className="row">
                        <div className="col-xs-12">
                            <div className="col__inner">
                                <div className="row">
                                    <div className="offers__items">
                                        {isStocksLoading && <Preloader />}
                                        {isStocksReady && (
                                            stocksList.length ? (
                                                stocksList.map(s => (
                                                    <StockSingle
                                                        stock={s}
                                                        attachments={stockAttachment[s.id]}
                                                        matchPath={matchPath}
                                                        key={s.id}
                                                    />
                                                ))
                                            ) : (
                                                <NoStocksMessage />
                                            )
                                        )}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }
}

export default StockPage;

для каждого компонента создать свои редюсер, а в экшн сделать запрос в зависимости от того какой slug пришел(динамически).

Что скажете? Такой вариант используется на практике? Как правильно это сделать? Либо продублировать component, reducer, action?

Спасибо.

Answer 1

[Антон Спирин]

Композиция и инверсия зависимостей:

class SomePage extends React.Component {
  componentDidMound() {
    this.props.fetchSomeData();
  }

  handleSomeEvent = () => {
    doSomething();
  };

  render() {
    const { data } = this.props;

    return <SomeCommonComponent data={data} onSomeEvent={this.handleSomeEvent} />;
  }
}

class SomeOtherPage extends React.Component {
  componentDidMound() {
    this.props.fetchSomeOtherData();
  }

  handleSomeEvent = () => {
    doSomethingOther();
  };

  render() {
    const { data } = this.props;

    return <SomeCommonComponent data={data} onSomeEvent={this.handleSomeEvent} />;
  }
}

Comments

[Дмитрий]

Спасибо