Как сделать один загрузчик редуктор для всего приложения, React

Question

У меня есть приложение, в котором у меня есть несколько компонентов, а также действия и редукторы для каждого компонента.Я также использую redux-pack для обработки обещаний.

Так что здесь ситуация, я просто хочу использовать один редуктор для всего моего приложения, которое обрабатывает мой загрузчик страниц.Это означает, что всякий раз, когда начинается вызов API, должен отображаться загрузчик, который должен скрываться после завершения API.Я не хочу писать отдельное действие для этого.

Пожалуйста, помогите мне с вашими предложениями.Заранее спасибо.

Answer 1

, у меня нет правильной идеи redux-pack, но я достиг этого, используя react-redux.Существует библиотека react-loading-overlay, в которой вы можете использовать ее или создать новую loading-overlay собственную.

https://github.com/derrickpelletier/react-loading-overlay Ссылка на библиотеку, если хотите.

Теперь перейдем ккод: -

Я создал глобальное состояние в редуксе с именем 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));