Transmettre le magasin au composant layout dans le routeur de réaction redux?

Question

Je veux passer des accessoires et invoquer des actions dans mon composant Layout. Lorsque j'essaie de le faire avec le code suivant, seul l'état initial est passé. Les modifications dans le magasin de redux ne sont pas reflétées.

Ceci est le code pour lancer l'application.

ReactDOM.render(
    <AppContainer> 
     <Provider store={ store }> 
      <ConnectedRouter history={ history } > 
       <Layout prop={store.getState()}> 
        <Route exact path='/' component={ Dashboard } /> 
        <Route path='/workorder' component={ WorkOrder } /> 
        <Route path='/programs' component={ Programs } /> 
        <Route path='/departments' component={ Departments } /> 
        <Route path='/users' component={ Users } /> 
        <Route path='/fetchdata/:startDateIndex?' component={ FetchData } /> 
       </Layout> 
      </ConnectedRouter> 
     </Provider> 
    </AppContainer>, 
    document.getElementById('react-app') 
); 

Ceci est le code de la page de disposition. Mon journal de console imprime uniquement l'état initial tout le temps

interface LayoutProps{ 
    prop: any; 
} 

export class Layout extends React.Component<LayoutProps, {}> { 
    public render() { 
     console.log(this.props); 
     return <div> 
        <Header/> 
        <div id="wrapper"> 
         <NavMenu/> 
         { this.props.children } 
        </div> 
       </div>; 
    } 
} 

Je ne sais pas pourquoi il n'est pas mis à jour. J'ai ce problème uniquement pour la mise en page. Tous les autres composants définis dans les routes sont connectés en utilisant 'connect' et fonctionne correctement.

Edit: Voici le code mis à jour:

ReactDOM.render(
    <AppContainer> 
     <Provider store={ store }> 
      <ConnectedRouter history={ history } > 
       <Layout> 
        <Route exact path='/' component={ Dashboard } /> 
        <Route path='/workorder' component={ WorkOrder } /> 
        <Route path='/programs' component={ Programs } /> 
        <Route path='/departments' component={ Departments } /> 
        <Route path='/users' component={ Users } /> 
        <Route path='/fetchdata/:startDateIndex?' component={ FetchData } /> 
       </Layout> 
      </ConnectedRouter> 
     </Provider> 
    </AppContainer>, 
    document.getElementById('react-app') 
); 

Voici le code dans la mise en page:

export class Layout extends React.Component<any, {}> { 

    public render() { 
     console.log(this.props); 
     return <div> 
        <Header/> 
        <div id="wrapper"> 
         <NavMenu/> 
         { this.props.children } 
        </div> 
       </div>; 
    } 
} 

export default connect(
    (state: ApplicationState) => state.users, // Selects which state properties are merged into the component's props 
    UsersStore.actionCreators.getCurrentUser    // Selects which action creators are merged into the component's props 
)(Layout) as typeof Layout; 

Mais seulement props.children sont disponibles à l'intérieur du composant de mise en page. Tous les autres accessoires ne sont pas définis même si je transmets state.users, UsersStore.actionCreators.getCurrentUser. Fondamentalement, il ne prend rien de redux store (Même après un certain nombre de re-rendus).

Answer 1

Vous devez utiliser react-reduxconnect enchancer.

import { connect } from 'react-redux' 
import { updateSomething } from 'actions' 


class LayoutComponent extends React.Component { 
    render() { 
    return (
     <div onClick={this.props.updateSomething}> 
     something: {this.props.something} 
     </div> 
    ) 
    } 
} 

export Layout = connect((state) => { 
    return { something: state.something } 
}, { updateSomething })(LayoutComponent) 

modifier: voir here pour plus d'informations