React+Redux+antd-mobile 应用中 全局Loading 组件的使用问题？

Question

我的使用场景：是在进入页面时

React 的 componentWillMount 方法中 去服务器请求用户信息

通过redux dispatch 一个异步的 方法发起ajax请求，同时显示一个Toast.loading('正在加载')

请求执行完成后通过reducer 更新用户的信息,在页面中通过props判断用户是否加载成功。

如果成功会使用Toast.hide()关闭刚才的loading。

这些都是没问题的。

但是我第二次使用Toast.loading 显示其他信息的时候。弹不出loading框，发现在上面的
render方法中先判断了用户是否加载成功，然后给我直接hide掉了。

请问大家在使用全局Loading 的时候是怎么处理的。

class XXX extends React.Component{
    componentWillMount(){

        //获取用户名
        const {userName} = this.props.params;

        //参数0表示一直显示loading，Toast.hide()才能关闭
        Toast.loading('正在加载...',0);

        //通过用户名加载用户详情(ajax请求后台)
        this.props.fetchUserDetail(userName);
    }

    onClick(){
        //问题在这里，当这里弹出lading的时候，render方法中的
        // isFetchUserSuccess 是true,接着就给我关闭了。界面上什么都看不到
        //通过redux改变isFetchUserSuccess的值好像不合理
        // 这里该如何处理？
        Toast.loading('xxx',0);
    }

    render(){

        const {isFetchUserSuccess}    =this.props

        if (isFetchUserSuccess) {
            Toast.hide();
        }

        return(
            <button onClick={this.onClick}></button>
        );
    }

}

export default connect(
        state=>({
            isFetchUserSuccess:state.userReducer.isFetchUserSuccess
        }),
        {UserActions}
)(XXX);

Answer 1

好吧。。。没有用过antd，说一下我的想法吧。

按照你的代码来改，你不要再render里面通过isFetchUserSuccess来决定是否隐藏Toast，而是通过action是否结束来判断。
this.props.fetchUserDetail(userName).then(Toast.hide);

Answer 2

思路，loading是全局的，只需要一个bool参数来判断是否显示loading，当WillMount的时候触发，isShowLoading设置为true，ajax成功的时候，将isShowLoading设置为false即可。

ajax:

if (ajax) {
    isShowLoading(false)
}

action:

//loading状态，true为显示，false不显示
export const isShowLoading = (bool) => ({
    type: "IS_SHOW_LOADING",
    bool
})

reducer:

case "IS_SHOW_LOADING":
    return {
        ...state,
        isFetchUserSuccess: !action.bool
    }

Component：

componentWillMount() {
    isShowLoading(true) //触发loading
}
render () {
    const { isFetchUserSuccess } = this.props
    //判断loading是否显示，只需要满足isFetchUserSuccess为false即可。
    return (
        <div>
            {!isFetchUserSuccess && <Loading />}
        </div>
    )
}

Answer 3

在reducer里定义一个loadingState，专门用来render里面用来判断是否需要hide

Answer 4

在你的reduce纯函数中定义一个loading的开关，例如loading:false
在定义一个action 去触发这个reducer

当你需要打开loading的时候 只需要dispatch 你定义好的action 去改变loading为true就可以了，关闭也是同样的道理。

当然你定义的这个loading这个组件最好在你最最最外层组件里面。