반응 라우터 redux의 레이아웃 구성 요소에 저장을 전달 하시겠습니까?

Question

내 레이아웃 구성 요소에서 소품을 전달하고 동작을 호출하려고합니다. 다음 코드로 작업하려고하면 초기 상태 만 전달됩니다. 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>; 
    } 
} 

내 콘솔 로그는 항상 초기 상태 만 인쇄합니다. 왜 업데이트되지 않는지 나는 모른다. 레이아웃에만이 문제가 있습니다. 경로에 정의 된 다른 모든 구성 요소는 '연결'을 사용하여 연결되고 올바르게 작동합니다.

편집 :

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는 레이아웃 구성 요소 내부 사용할 수 있습니다

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

이 레이아웃의 코드는 다음과 같습니다이 업데이트 된 코드입니다. state.users, UsersStore.actionCreators.getCurrentUser를 전달하더라도 다른 모든 소품은 정의되지 않습니다. 기본적으로 그것은 redux 저장소에서 아무 것도 가져 오지 않습니다 (여러 번 다시 렌더링 한 후에도).

Answer 1

react-redux 님의 connect 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) 

편집 : 업데이트 된 질문을 참조하시기 바랍니다 자세한 내용