react-redux 无限dispatch

Question

想用redux做一个部分接口的loading

import Axios from 'axios';
import stroe from '../redux/store'
const ToggleLoading = {
    type:'SHOW_LOADING'
}

const Ajax = (o,loading=false, data = {}, type = 'POST', headers = {
                'content-type': 'application/json',
                'Authorization':'Bearer '+window.localStorage['token']}) => {
    return new Promise((resolve, reject) => {
        if(loading){
            stroe.dispatch(ToggleLoading)
        }
        Axios({
            url:  o,
            method: type,
            data: data,
            headers: headers,
        }).then(r => {
            if(r.data.code === 401){
                if(loading){
                    stroe.dispatch(ToggleLoading)
                }
                resolve(r)
            }else{
                if(loading){
                    stroe.dispatch(ToggleLoading)
                }
                resolve(r)
            }
        }).catch(r => {
            reject(r)
        })
    })
};

export default Ajax


//reducer.js state给的默认值是false
function Loading(state=initReducerState.initLoading,action){
    switch(action.type){
        case 'SHOW_LOADING':
        console.log(action.type) //这里控制台会一直无限打印'SHOW_LOADING'
        return !state
        default:
        return state
    }
}

//index.js 总布局的js，不知道这样做是不是对的
<Loading isLoading={this.props.initLoading}}>
    <Mainlayout >
</Loading>
const mapStateToProps=(state)=>{
    return {
        init:state.Modal,
        initLoading:state.Loading
    }
}
IndexPage = connect(mapStateToProps)(IndexPage)
export default IndexPage

//Loading.js
<div>
    {this.props.isLoading?
        <div className={style.whenloading}>
            <img src={loadingUrl} alt=''></img>
        </div>:
        this.props.children
                }
</div>

//Loading嵌套的<Mainlayout/>

componentDidMount() {
        GetLatestArtical().then(r => {
            for(let val of r.data.data){
                if(val.content[0].length >200){
                    val.content[0]=val.content[0].substr(0,200)
                }
                val.time = formatDate(new Date(Number(val.savetime*1000)),'yyyy-MM-dd hh:mm')
            }
            this.setState({
                list:r.data.data
            })
        })
    }

小弟的想法就是，在上面index.js里面去获取redux的state，从而控制loading组件是否渲染children，还是我想要的loading界面，在ajax中，如果请求完成，数据拿到了，就关闭loading

现在问题是,reducer里面console.log(action.type)，这里会一直无限打印，同时控制台报错
Can't perform a React state update on an unmounted component.这个报错如果取消掉Mainlayout里面的setState的话就会消失，求大神帮忙看看问题出在哪里呀

Answer 1

蠢了，找到问题了，loading的嵌套导致了死循环。。现在将loading和mainlayout同级显示，不知道有没有大佬有就我现在这样有更好的方法。