Redux Loading Bar 사용법

Redux Loading Bar

• Redux 액션의 로딩 상태를 표시하는 라이브러리. (액션의 시작과 종료 시점에 액션 타입을 기반으로 로딩 상태를 표시)
• Redux 스토어에 연결하여 사용할 수 있으며, 자동으로 로딩 상태를 관리함. (미들웨어로 사용)

저장소

• react-redux-loading-bar

사용법

설치

npm install react-redux-loading-bar

로더 컴포넌트 추가

import { Provider } from 'react-redux';
import { LoadingBar } from 'react-redux-loading-bar';
import store from './store';

const App = () => (
  <Provider store={store}>
    <LoadingBar />
    <YourComponent />
  </Provider>
);

리듀서 설정

import { loadingBarReducer } from 'react-redux-loading-bar';
import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  loadingBar: loadingBarReducer,
  // other reducers
});

middleware 설정

import { createStore, applyMiddleware } from 'redux';
import { loadingBarMiddleware } from 'react-redux-loading-bar';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(loadingBarMiddleware())
);