comment lire l'état dans le composant principal App, il est semble n'est pas créé

Question

J'ai un réducteur simple qui vient définir une variable par défaut « thème » et ne font que retourner cette valeur:

appreducer.js

const initialState = { 
    theme: 'skyhola', 
}; 

export default (state = initialState, action) => { 
    switch (action.type) { 
    default: 
     return state; 
    } 
}; 

sur les composants qui ne sont pas la principale app.js, je peux lire cet état:

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
class TestColors extends Component { 
    render() { 
    return (
     <div> 
     Theme: { this.props.theme } // <---it's ok, print 'sky' 
     </div> 
    ); 
    } 
} 

export default connect(
    (state) => ({ theme: state.app.theme }), 
)(TestColors); 

Mais comment le lire sur le composant principal? parce que je dois écrire dans le rendu dans:

<ThemeProvider theme={ HERE MY STATE THEME !! }> 

l'Etat sont en cours de création et CONSOLE.LOG en rendre, ou ComponentDidMount me donner vide {}, je ne peux pas Wray App avec « Connect » de Redux, parce qu'il est l'application est en cours de création ...

app.js

const store = createStore(
    combineReducers({ 
    apollo: client.reducer(), 
    app: appReducer, 
    }), 
    {}, 
    compose(
    applyMiddleware(client.middleware()), 
    // If you are using the devToolsExtension, you can add it here also 
    window.devToolsExtension ? window.devToolsExtension() : f => f, 
), 
); 

class App extends Component { 

    componentDidMount() { 
    console.log(this.props); <--- nothing here, how to read the state? 
    } 
    render() { 

    return (
     <ApolloProvider store={store} client={client}> 
     <BrowserRouter> 
      <ThemeProvider theme={ HERE MY STATE THEME !! }> 

       <Switch> 
       <Route exact path="/signin" component={SignInPage} /> 
       </Switch> 


      </ThemeProvider> 
     </BrowserRouter> 
     </ApolloProvider> 
    ); 
    } 
} 

export default App; 

Answer 1

Pour lire l'état dans ce cas, vous devez appeler la méthode getState du magasin. Vous pouvez vérifier this fiddle.

Answer 2

vous mapStateToProps devriez être state.theme au lieu de state.app.theme. Vous devez appeler le constructeur du composant App.

class App extends Component { 
    constructor(props){ 
    super(props) 
    } 
    ... 
}