How to dispatch onchange event in redux?

Question

I have created a search box inside component. So I am calling onchange function outside in parent App.js. Now I am trying to dispatch that function if I type anything in search box but I can't access that function outside my class.

How to dispatch my function?

Please find my source code below:

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);

Here I can't access that {searchQuery: (query) => {searchFetch(query)}} because of not accessible that function outside class.

HELP WOULD BE APPRECIATED!!

score 0 · Answer 1 · answered Aug 10 '17 at 20:45

mapDispatchToProps takes/passes the dispatch function and then return searchQuery function as a prop.

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

Then in the Header component pass the searchQuery prop

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

How to dispatch onchange event in redux?

1 Answers1