Question

我试图避免在每个需要访问它的组件中手动订阅redux存储。意思是，我想避免在每个需要访问存储的组件中执行connect(mapStateToProps, mapDispatchToProps)(component)。我目前的策略是拥有一个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.cloneElement基本上将redux存储中的props放到子组件中。我是从Wess Bos的redux教程（https://www.youtube.com/watch?v=l2IOqeubsBw&t=388s&ab_channel=WesBos）中得到这个想法的。

但是，我也在使用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'));

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

我不确定这是否与我使用React Router或在App.js中封装组件的技术有关。

非常感谢您的帮助。

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

0 个答案: