javascript - Can we subsribe event listeners globally using redux to avoid passing a function as a prop from parent to multiple child -

example:

app.jsx ( parent component )

import react, {component} 'react'; import pane './tabpanel/pane'; import registry '../utils/registry' import sidenavbar './sidenav/sidenav';       /**      *       *       * @class application      * @extends {component}      */     class application extends component {          constructor(props) {             super(props);             this.state = { sidenavfunc: '',  sidenavdirfunc: ''};             this.callbacksidenavclick = this.callbacksidenavclick.bind(this);             this.callbacksidenavdirclick = this.callbacksidenavdirclick.bind(this);          }          rendercontent(content, navclickfunc, navdirclickfunc) {             return content.map((item, index) => {                 if(item.type === 'component'){                     let componentfn = registry[item.value];                      return componentfn ? componentfn(index, navclickfunc, navdirclickfunc) : item.value;                 }                  if(item.type === 'link'){                     return (<iframe classname="iframe-panel" src={item.value} />);                 }                  return "";             });         }          callbacksidenavclick(inputfunc, e) {                   this.setstate({                sidenavfunc: inputfunc.bind(e)            });         }          callbacksidenavdirclick(inputfunc, e) {             this.setstate({                sidenavdirfunc: inputfunc.bind(e)            });         }          render() {             const appconfig = this.props.config;              const items = appconfig.children.map((item, index) => (                          <pane key={index} label={item.heading}>                             <div classname="content-class">{this.rendercontent(item.content, this.callbacksidenavclick, this.callbacksidenavdirclick)}</div>                         </pane>                     ));              return (                 <div>                     <div classname="left-panel">                         <label classname="panel-title" >{appconfig.heading}</label>                         <searchbar />                          <sidenavbar callbacksidenavbaroptionclick={this.state.sidenavfunc} callbackdirfileclick={this.state.sidenavdirfunc} />                     </div>                 </div>              );         }     }      export default application; 

as can see in above code have passed 2 functions - callbacksidenavclick() , callbacksidenavdirclick() component registry.js using code below :

rendercontent(content, navclickfunc, navdirclickfunc) {             return content.map((item, index) => {                 if(item.type === 'component'){                     let componentfn = registry[item.value];                      return componentfn ? componentfn(index, navclickfunc, navdirclickfunc) : item.value;                 }                  if(item.type === 'link'){                     return (<iframe classname="iframe-panel" src={item.value} />);                 }                  return "";             });         } 

registry.js

/**  * add react components available configuration  *   * key: put name become component name in application configuration  * value: function returen component  */  import react 'react'; import fileviewercontainer '../components/fileviewercontainer/fileviewercontainer';  const registry = {     fileviewercontainer: (index, navclickfunc, navdirclickfunc) =>  (<fileviewercontainer key={index} navclickfunc={navclickfunc} navdirclickfunc={navdirclickfunc} />) };  export default registry; 

like passed 2 functions "fileviewercontainer" component , on. question instead of passing these 2 function multiple child prop, can implement same using redux functionality. possible. can please me achieve that..

in redux, can avoid passing functions through deep component hierarchies. can connect component redux store using connect function react-redux library , actions/functions using mapdispatchtoprops (2nd argument): https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

example redux docs: https://github.com/reactjs/redux/blob/master/examples/real-world/src/containers/userpage.js see 2nd argument of export default connect on bottom. that’s actions.