2017-09-14 19 views
0

レイアウトコンポーネントでpropsとinvokeアクションを渡したいと思います。私が次のコードでそれをしようとすると、初期状態だけが渡されます。還元店の変更は反映されません。反応ルータreduxのレイアウトコンポーネントにストアを渡しますか?

これは、アプリを起動するためのコードです。

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') 
); 

これはレイアウトページのコードです。

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>; 
    } 
} 

コンソールログは、常に初期状態のみを表示します。なぜ更新されていないのか分かりません。私はレイアウトのためだけにこの問題があります。ルートに定義されている他のすべてのコンポーネントは、 'connect'を使用して接続され、正しく動作します。

編集:これは、更新されたコードです:

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') 
); 

これは、レイアウトのコードです:

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; 

しかし、唯一のprops.childrenは、レイアウト・コンポーネントの内側に用意されています。私がstate.users、UsersStore.actionCreators.getCurrentUserを渡しても、他のすべての小道具は未定義です。基本的には、(すべての再レンダリングの後でさえ)レデックスストアから何も取っていません。

答えて

2

react-reduxconnectエンハンサーを使用する必要があります。

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) 

編集:より多くの情報

+0

ためhereを参照してください更新質問を参照してください。私はレイアウトを接続しようとしました。しかし、すべての小道具は私が推測するルータから来るprops.childrenを除いて未定義です。私はここであなたの答えを見ました(助けなかった)。 https://stackoverflow.com/questions/43502291/typescript-redux-exclude-redux-props-in-parent-component –

関連する問題