react redux中如何将store传递给子组件？答案

【问题标题】：How to pass store to the sub component in react redux?react redux中如何将store传递给子组件？
【发布时间】：2020-06-24 13:13:14
【问题描述】：

我正在开发一个 react 应用程序并创建了一个全球商店

const store = HsGlobalStore();

class HsManApp extends React.Component {
    render() {
        return (
            <div className="d-flex flex-column bag-white">
                <Provider store={store}> <NewHsMasterNav />  </Provider>
                <div className="clearfix"></div>
                <div className="container-fluid hs-fix-nav-content ">
                    <Router>
                        <Provider store={store}> 
                            <Route path="/" exact component={HsHome} />
                            <Route path="/:pageName" component={HsPage} />
                        </Provider>
                    </Router>
                </div>
            </div>
           
        );
    }
}


const id = "hs_welcome_root";

ReactDOM.render(<HsManApp />, document.getElementById(id));

export default HsManApp;

我通过 Provider 将此存储传递给母版页组件

<Provider store={store}> 
                            <Route path="/" exact component={HsHome} />
                            <Route path="/:id" component={HsPage} />
                        </Provider>

但是这个Man组件也有sob组件

class HsHome extends React.Component {

    constructor(props) {
        super(props);

    }



    render() {
        return (
                <div className="row">
                    <NewHsAvatarBox /> 
                </div>
        );
    }
}

export default HsHome;

现在。我怎样才能将这个商店传递给这个组件？

【问题讨论】：

我认为您实际上并不需要多个提供者，只需将整个内容包装在一个中即可。然后使用connect HOC或hooks在子组件中访问。
@BrianThompson 你的评论变成了我的答案。非常感谢您的帮助:)

标签： reactjs redux react-redux

【解决方案1】：

你需要“装饰”你的组件，将 store 传递给 props

import { connect } from 'react-redux';

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        console.log(this.props.name);
    }
    ...
}

const mapStateToProps = (store) => {
   // console.log('store', store);
   return {
      name: store.<reducer>.name,
   };
};

export default connect(mapStateToProps, null)(MyComponent);

然后使用mapStateToProps中导出的名称作为MyComponent中的props

【讨论】：