Layout连接redux会造成路由组件DidMount循环

#1

router.js

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic';
import Layout from '../components/layout/Index';
import ContentRoute from './contentRoute'

const RouterConfig = ({ history,app }) => {
    return (
        <Router history={history}>
            <Switch>
                <Layout>
                    <ContentRoute app={app} />
                </Layout>
            </Switch>
        </Router>
    );
}

export default RouterConfig;

layout.js

const layout = ({children,history}) => {
    return (
        <Layout style={{ minHeight: '100vh' }} id='crm-layout'>
            <Siders history={history} />
            <Layout>
                <Headers history={history} />
                <Content style={{ margin: '15px' }}>
                    <Breadcrumbs history={history} />
                    <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                        {children}
                    </div>
                </Content>
            </Layout>
        </Layout>
    );
    
}
export default layout

list.js

class List extends React.Component {
    componentDidMount(){
        const { dispatch } = this.props

        dispatch({ type: 'list/query'});
    }
}

function mapStateToProps(state) {
    return state.list
}

export default connect(mapStateToProps)(List);

我的List相当是路由的入口页面，外层包装了layout，如果layout使用React组件，并且连接redux，因为prop更新了，List里面DidMount的dispatch会一直循环

layout写成这样List就会循环


class layout extends React.Component{
    render(){
        const {children,history} = this.props
        
        return (
            <Layout style={{ minHeight: '100vh' }} id='crm-layout'>
                <Siders history={history} />
                <Layout>
                    <Headers history={history} />
                    <Content style={{ margin: '15px' }}>
                        <Breadcrumbs history={history} />
                        <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                            {children}
                        </div>
                    </Content>
                </Layout>
            </Layout>
        )

    }
}
function mapStateToProps(state) {
    return state.layout
}
export default connect(mapStateToProps)(layout)

请问是我封装布局组件的思路错了还是有什么优化的手段？应该怎么解决这个问题？因为layout有一些操作需要连接到redux