प्रतिक्रिया, Redux, प्रतिक्रिया-रूटर - स्थापित करने के लिए सामग्री-ui

Question

ट्यूटोरियल पर अटक:

लेकिन जब से मैं redux उपयोग कर रहा हूँ और रूटर प्रतिक्रिया मैं वास्तव में MuiThemeProvider श्रृंखला के शीर्ष करने के लिए रख सकते हैं। इस पुस्तकालय को शामिल करने का सबसे अच्छा तरीका क्या है?

मेरी ReactDOM.render समारोह है कि:

ReactDOM.render(
    <Provider store={store}> 
    <div> 
     {devTools} 
     <Router history={history} routes={getRoutes(actions.logout)}/> 
    </div> 
    </Provider>, 
    document.getElementById('root') 
); 

और वह रूटर है:

export default (onLogout) => (
    <Route path="/" name="app" component={App}> 
    <IndexRoute component={SimpleListComponent}/> 
    <Route path="register" component={RegisterPage}/> 
    <Route path="private" component={privateRoute(PrivatePage)}/> 
    <Route path="login" component={LoginPage}/> 
    <Route path="logout" onEnter={onLogout}/> 
    </Route> 
); 

Answer 1

मैं यह इतना की तरह किया है। मेरे पास एक index.js है जो मेरे पैकेज.जेसन द्वारा शुरू की जाने वाली मुख्य फ़ाइल के रूप में संदर्भित है (एनपीएम शुरू के साथ)।

import './stylesheets/fonts.css'; 
import './stylesheets/main.css'; 

injectTapEventPlugin(); 

// custom MuiTheme overriding the getMuiTheme() values 
const muiTheme = getMuiTheme({ 
    palette: { 
    textColor: cyan500, 
    }, 
    appBar: { 
    color: grey300, 
    textColor: cyan500, 
    height: 50 
    }, 
}); 

const Index =() => (
    <MuiThemeProvider muiTheme={muiTheme}> 
    <Root /> 
    </MuiThemeProvider> 
) 

render(
    <Index />, 
    document.getElementById('app') 
); 

यह एक और फ़ाइल रूट पर निर्भर करता है, मेरे कंटेनर में पाया/Root.jsx फ़ाइल:

const store = configureStore(); 

// Create an enhanced history that syncs navigation events with the store 
const history = syncHistoryWithStore(browserHistory, store); 

let onUpdate =() => {window.scrollTo(0, 0); }; 

export default class Root extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <div> 
      <Router history={history} onUpdate={onUpdate}> 
      <Route path="/" component={App}> 
       <IndexRoute component={Home}/> 
       <Route path="home" component={Home}/> 
       <Redirect path="*" to="/" /> 
      </Route> 
      </Router> 
      <DevTools/> 
     </div> 
     </Provider> 
    ); 
    } 
} 

आगे अनुप्रयोग है यह मैं (संक्षिप्तता के लिए कुछ आयात और इस तरह निकाला गया) है है, जो (मेरे कंटेनरों में/App.jsx फ़ाइल) अपने आवेदन की मेरी प्रारंभिक लेआउट शामिल हैं:

export default class App extends Component { 
    constructor(props, context) { 
    super(props, context); 
    } 

    static propTypes = { 
    children: PropTypes.node 
    } 

    render() { 
    return (
     <Grid fluid> 
     <Row> 
      <Col> 
      <Header active={this.props.active} /> 
      </Col> 
     </Row> 
     <Row> 
      <Col> 
      {this.props.children} 
      </Col> 
     </Row> 
     <Row> 
      <Col> 
      <Footer/> 
      </Col> 
     </Row> 
     </Grid> 
    ); 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    return { 
    active: ownProps.history.isActive 
    }; 
}; 

export default connect(mapStateToProps)(App) 

मैं उपयोग कर रहा हूँ लेआउट के लिए फ्लेक्स ग्रिड घटक प्रतिक्रिया होती है।

अब तक यह मेरे लिए काम करता है। उम्मीद है कि यह आपकी मदद करता है। InjectTapEventPlugin() कॉल को न भूलें, क्योंकि मेरे पास यह मेरी index.js फ़ाइल में है। मैं अपने ऐप के लिए .css फ़ाइलों को भी आयात करता हूं।

Answer 2

ReactDOM.render(
    <MuiThemeProvider muiTheme={getMuiTheme()}> 
    <Provider store={store}> 
    <div> 
     {devTools} 
     <Router history={history} routes={getRoutes(actions.logout)}/> 
    </div> 
    </Provider> 
    </MuiThemeProvider> 
, 
    document.getElementById('root') 
);