Javascript 将道具从redux存储传递到子组件

我试图避免在每个需要访问redux存储的组件中手动订阅redux存储。也就是说，我希望避免在每个需要访问存储的组件中执行

连接（MapStateTops，mapDispatchToProps）（组件）

。我目前的策略是使用App.js组件：

import React from 'react';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import * as AllStudentActions from '../actions/StudentActions';
import * as AllEmployerActions from '../actions/EmployerActions';
import * as AllRecruiterActions from '../actions/RecruiterActions';
import * as AllUserActions from '../actions/UserActions';
import * as AllSocketActions from '../actions/SocketActions';


class App extends React.Component {
    render() {
        return (
            <div>
                <h1>This is app</h1>
                {/* {React.cloneElement(this.props.children, this.props)} */}
                {/* {React.cloneElement({...this.props}.children, {...this.props})} */}
                {React.cloneElement({...{...this.props}.children}.children, {...this.props})}
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        jobs: state.jobs,
        employers: state.employers,
        recruiters: state.recruiters,
        user: state.user,
        students: state.students,
        socket: state.socket
    };
}


const mapDispatchToProps = (dispatch) => {
    return {
        actions: {
            userActions: bindActionCreators(AllUserActions, dispatch),
            studentActions: bindActionCreators(AllStudentActions, dispatch),
            employerActions: bindActionCreators(AllEmployerActions, dispatch),
            socketActions: bindActionCreators(AllSocketActions, dispatch),
            recruiterActions: bindActionCreators(AllRecruiterActions, dispatch)
        }
    };
}

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

从“React”导入React；
从“redux”导入{bindActionCreators}；
从'react redux'导入{connect}；
从“../actions/StudentActions”导入*作为所有StudentActions；
从“../actions/EmployerActions”导入*作为AllEmployerActions；
从“../actions/RecruiterActions”导入*作为所有RecruiterActions；
从“../actions/UserActions”导入*作为典故引用；
将*作为“../actions/SocketActions”中的所有SocketActions导入；
类应用程序扩展了React.Component{
render（）{
返回(
这是一个应用程序
{/*{React.cloneElement（this.props.children，this.props）}*/}
{/*{React.cloneElement（{…this.props}.children，{…this.props}）}*/}
{React.cloneElement（{…{…this.props}.children}.children，{…this.props}）}
)
}
}
常量mapStateToProps=（状态）=>{
返回{
乔布斯：州立大学，乔布斯，
雇主：国家雇主，
招聘人员：州招聘人员，
用户：state.user，
学生：州立大学，学生，
socket:state.socket
};
}
const mapDispatchToProps=（调度）=>{
返回{
行动：{
userActions:bindActionCreators（AllUserActions、dispatch），
studentActions:bindActionCreators（所有studentActions，调度），
employerActions:bindActionCreators（AllEmployerActions，dispatch），
socketActions:bindActionCreators（所有socketActions，分派），
招聘活动：bindActionCreators（所有招聘活动，发送）
}
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；

这就是使用React.cloneElement基本上将道具从redux商店“洒下”到子组件。我从Wess Bos的redux教程（）中得到了这个想法

但是，我也在使用react路由器，如我在我的index.js中所示：

import React from 'react';
import { render } from 'react-dom';

import App from  './components/App';

import WaveyText from './components/WaveyText';

import Main2 from './components/Main2';


// import pages components



// router dependencies
import { Route, Switch } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';

import store from './store';





const router = (
    <Provider store={store}>
        <BrowserRouter>
          
          <Route path="/" component={App}>
              <Switch>
                  <Route exact path="/" component={WaveyText}></Route>
                  <Route exact path= "/test"> <div> Test </div> </Route>
              </Switch>
          </Route>

        </BrowserRouter>
    </Provider>
)

render(router, document.getElementById('root'));

从“React”导入React；
从'react dom'导入{render}；
从“./components/App”导入应用程序；
从“/components/WaveyText”导入WaveyText；
从“./components/Main2”导入Main2；
//导入页面组件
//路由器依赖关系
从“react router”导入{Route，Switch}；
从“react router dom”导入{BrowserRouter}；
从'react redux'导入{Provider}；
从“./store”导入存储；
常数路由器=(
试验
)
render（router，document.getElementById（'root'））；

传递到Route的组件没有连接到存储。至少，App.js应该呈现，在react dev工具中，我应该在App.js组件中看到redux存储的默认状态，但这并没有发生。显然，App.js下的子组件也没有连接

我不确定这是我如何使用react路由器的问题，还是我在App.js中包装组件的技术问题

---

非常感谢您提供的任何帮助。

FYI我以前认为最好将状态传递下去，但redux文档实际上建议在更多点进行连接：是的，我开始意识到这也是一个更好的选择。谢谢你的评论和文章。