Question

我想在我的Layout组件中传递道具并调用动作。当我尝试使用以下代码时，只传递初始状态。 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>;
    }
}

我的控制台日志只会一直打印初始状态。我不知道为什么它没有得到更新。我有这个问题只适用于布局。路线中定义的所有其他组件都使用＆＃39; connect＆＃39;并正常工作。

编辑：这是更新的代码：

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，所有其他道具都是未定义的。基本上它没有从redux商店拿走任何东西（即使经过任意数量的重新渲染）。

Answer 1

您需要使用react-redux＆＃39; 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)

编辑：有关详细信息，请参阅here

将商店传递给react router redux中的布局组件？

1 个答案: