我们可以使用redux在全局范围内订阅事件侦听器，以避免将作为道具的功能从父级传递到多个子级吗

Question

Example:

App.jsx ( Parent component )

import React, {Component} from 'react';
import Pane from './tabpanel/pane';
import Registry from '../utils/registry'
import SideNavBar from './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 you can see in the above code I have passed 2 functions - callbackSideNavClick() and callbackSideNavDirClick() to another component Registry.js using the 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 all React components to available as configuration
 * 
 * key: Put the name which will become component name in application configuration
 * value: function to returen component
 */

import React from 'react';
import FileViewerContainer from '../components/fileviewercontainer/fileviewercontainer';

const Registry = {
    FileViewerContainer: (index, navClickFunc, navDirClickFunc) =>  (<FileViewerContainer key={index} navClickFunc={navClickFunc} navDirClickFunc={navDirClickFunc} />)
};

export default Registry;

Like this I passed 2 functions to "FileViewerContainer" component and so on. My question is instead of passing these 2 function to multiple child as a prop, can I implement the same using any redux functionality. Probably its possible. can anyone please help me to achieve that..

Answer 1

In redux, you can avoid passing functions through deep component hierarchies. You can connect any component to the redux store using connect function from react-redux library and get your actions/functions using mapDispatchToProps (2nd argument): https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

Example from the redux docs : https://github.com/reactjs/redux/blob/master/examples/real-world/src/containers/UserPage.js See the 2nd argument of export default connect on the bottom. That's where you get your actions.