Question

我有一个应用程序，其中我有多个组件以及每个组件的操作和缩减器。我也使用redux-pack进行承诺处理。

所以情况就是这样，我只想在整个应用程序中使用一个reducer来处理我的页面加载器。这意味着，每当API调用开始时，加载程序都应显示，并且应该在API结束时隐藏。我不想为此单独写一个动作。

请帮助我提出建议。提前谢谢。

Answer 1

，我没有正确的想法redux-pack但我使用react-redux实现了这一点。您可以使用库react-loading-overlay库或创建新的loading-overlay库。

https://github.com/derrickpelletier/react-loading-overlay如果您愿意，可以使用图书馆的链接。

现在来看代码： -

我在redux中创建了一个名为loadingState

的全局状态

//this is my action.
export const ENABLE_OR_DISABLE_LOADING = 'ENABLE_OR_DISABLE_LOADING';

export function enableOrDisableLoading (value = true, msg='Loading your content') {
    return {
        type: ENABLE_OR_DISABLE_LOADING,
        payload: {isLoading: value, msg: msg}
    };
}

//this is my reducer.
export function loading(state={isLoading: false, msg: 'Please wait...'}, action) {
    switch (action.type) {
        case ENABLE_OR_DISABLE_LOADING:
            return action.payload;
        default:
            return state;
    }
}

Add this reducer to your store.


My HOC is like this.

import LoadingOverlayWrapper from 'react-loading-overlay';


class AdminImpl extends React.Component {
  return (
            <LoadingOverlayWrapper
                active={this.props.isLoading}
                spinner
                zIndex={1000}
                className="height100"
                text={this.props.msg}
            >
             <SideBar/>
             {this.props.child}
            </LoadingOverlayWrapper>
        );
}

const mapStateToProps = (state) => {
    return state.loading;
};

export const Admin = connect(mapStateToProps)(AdminImpl);



Now dispatch action from anywhere from your app.

//start Loading state
store.dispatch(enableOrDisableLoading(true, 'Your loading msg'));

//start Loading state
store.dispatch(enableOrDisableLoading(false));

如何为整个应用程序制作单个装载器减速器，React

1 个答案: