Как передать реквизиты дочернему компоненту из родительского компонента и получить его в дочернем компоненте с использованиемact-redux

Question

Мой родительский компонент подобен компоненту Requestdetails

import React, { Component } from "react";
import TopBarComponent from '../../common/TopBar/topBar'
export default class RequestDetailsComponent extends Component {
    showBreadcrumb: boolean;
    breadcrumbs: { title: string; navigate: string; state: boolean; }[];
    constructor(props: any) {
        super(props)
        this.showBreadcrumb = true;
        this.breadcrumbs = [
            { title: 'Dashboard', navigate: 'dashboard', state: true },
            { title: 'Requests', navigate: 'requestList', state: true },
            { title: 'Request Details', navigate: '', state: false }]
    }
    render() {
        return (
           <div>
               <TopBarComponent showBreadcrumb={this.showBreadcrumb} breadcrumbs={this.breadcrumbs}/>
           </div>
        );
     }
}

Дочерний компонент - компонент TopBar

import React, { Component } from "react";
import { Breadcrumb, BreadcrumbItem } from 'carbon-components-react'

export default class TopBarComponent extends Component {
   showBreadcrumb:boolean;
   constructor(props:any){
       super(props);
       this.showBreadcrumb = props.showBreadcrumb
   }
   render() {
      let breadcrumbClass = 'dte-breadcrumbs dte-breadcrumbs--with-layout';

         if(this.showBreadcrumb){
             return (
                <div className={breadcrumbClass}>
                     <div className="dte-page-container">
                          <div className="container-fluid">
                               <Breadcrumb >
                                   <BreadcrumbItem>
                                         <a href="/#">Breadcrumb 1</a>
                                   </BreadcrumbItem>
                               </Breadcrumb>
                          </div>
                    </div>
              </div>
           );
       }
       return null;
     }
}

Я хочу передать массивы 'showBreadcrumb' и 'breadcrumbs' компоненту topBar из компонента Requestdetails. но не в состоянии сделать это в реагирующем-редуксе.

Приведенный выше подход, который я использовал, чтобы следовать в реакции, но теперь я пробую этот реакт-редукс., но не прошел. Посоветуйте, пожалуйста, как мне это пройти.

Answer 1

Если у вас есть резервное хранилище и провайдер, настроенные и настроенные правильно, способ подключить компоненты пользовательского интерфейса к вашему магазину, верите вы или нет, с помощью react-redux s connect HO C.

import React, { Component } from "react";
import { connect } from 'react-redux'; // import the connect HOC
import { Breadcrumb, BreadcrumbItem } from "carbon-components-react";

class TopBarComponent extends Component {
  render() {
    let breadcrumbClass = "dte-breadcrumbs dte-breadcrumbs--with-layout";

    if (this.props.showBreadcrumb) {
      return (
        <div className={breadcrumbClass}>
          <div className="dte-page-container">
            <div className="container-fluid">
              <Breadcrumb>
                <BreadcrumbItem>
                  <a href="/#">Breadcrumb 1</a>
                </BreadcrumbItem>
              </Breadcrumb>
            </div>
          </div>
        </div>
      );
    }
    return null;
  }
}

// define a function that maps your redux state to props
const mapStateToProps = state => ({
  breadcrumbs: state.breadcrumbs, // these should match how your reducers define your state shape
  showBreadcrumb: state.showBreadcrumb,
});

// export the connected component
export default connect(mapStateToProps)(TopBarComponent);