FrontendRedux

Redux Middleware 만들기

목차

Redux Middleware 만들기

Middleware 생성

Dispatch 되는 이력을 콘솔로 찍는 로거를 만든다.

const myLogger = store => next => action => {
    console.log(action);
    const result = next(action);
    // 반환하는 result 는 Container 에서 Disaptch 됐을 때 결과 물이 result
    return result;
}

export default myLogger;

Middleware 적용

applyMiddleware 함수를 이용해 Redux 에 미들웨어를 적용한다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './modules';
import { Provider } from 'react-redux';
import myLogger from './middlewares/myLogger';

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

reportWebVitals();
Share