Comment faire pour envoyer l'événement onchange en redux?

Question

J'ai créé un champ de recherche à l'intérieur du composant. Donc j'appelle la fonction onchange à l'extérieur dans le parent App.js. Maintenant j'essaye d'expédier cette fonction si je tape n'importe quoi dans la boîte de recherche mais je ne peux pas accéder à cette fonction en dehors de ma classe.

Comment distribuer mes fonctions?

S'il vous plaît trouver mon code source ci-dessous:

import React, {Component} from "react"; 
import {connect} from "react-redux"; 
import { User } from "../components/User"; 
import { Main } from "../components/Main"; 
import Data from "../components/Data"; 
import MovieListing from '../components/MovieListing'; 
import Header from '../components/Header' 
import { setName, getApiData } from "../actions/userActions"; 
import {apiFetch} from "../actions/dataActions" 
import {searchFetch} from "../actions/searchActions" 

class App extends Component {  

    constructor(props){ 
     super(props) 
     this.searchQuery = this.searchQuery.bind(this); 
    } 

    searchQuery(query) { 
    } 

    render() {   
     let dataSet=this.props.data.data.results; 
     let imagePath = [] 
     let original_title = [] 
     let release_date = [] 
     let original_language = [] 
     if(dataSet){ 

      dataSet.forEach(function (value, key) { 
       imagePath.push(<Data key={key} imagePath={value.backdrop_path} release_date={value.release_date} original_title={value.original_title} original_language={value.original_language} />) 
       original_title.push(value.original_title) 
      }) 
      return(
       <div className="wrapper"> 
        <Header searchQuery = { this.searchQuery } /> 
        <div className="movies-listing"> 
         <div className="container"> 
          <MovieListing imagePath={imagePath} release_date={release_date} original_title={original_title} original_language={original_language} />    
         </div> 
        </div> 
       </div> 
      ) 

     }else{ 
      return(
       <div className="middle-loader"> 
        <h1>Loading</h1> 
       </div> 
      ) 
     } 
     // console.log("this.props",this.props); 
    } 

} 

const mapStateToProps = (state) => { 
    return { 
     user: state.user, 
     math: state.math, 
     data: state.data, 
     searchData: state.searchData 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return dispatch(apiFetch()), {searchQuery: (query) => {searchFetch(query)}} 
}; 

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

Ici je ne peux pas accéder à ce {searchQuery: (query) => {searchFetch(query)}} en raison de ne pas accessible cette fonction en dehors de la classe.

L'AIDE SERAIT APPRÉCIÉE !!

Answer 1

mapDispatchToProps prend/passe la fonction d'envoi puis retour fonction searchQuery comme un accessoire.

const mapDispatchToProps = (dispatch) => { 
    return { 
    searchQuery: (query) => { dispatch(searchFetch(query)) } 
    } 
}; 

Ensuite, dans le composant Header passer le searchQuery prop

<Header searchQuery={ this.props.searchQuery } />