React 공부하기(7) - 리덕스 미들웨어

보통 리덕스에서 미들웨어를 사용하는 주된 사용 용도는 비동기 작업을 처리할 때이다. (redux-thunk, redux-sage 등)

 

$ yarn add redux react-redux

 

 

2. 미들웨어 만들어보고 이해하기

 

리덕스 미들웨어의 템플릿

const middleware = store => next => action => {
  // 하고 싶은 작업...
}

function middleware(store) {
  return function (next) {
    return function (action) {
      // 하고 싶은 작업...
    };
  };
};

store: 리덕스 스토어

next: 액션을 다음 미들웨어에게 전달하는 함수 next(action)

action: 현재 처리하고 있는 액션 객체

 

미들웨어 직접 작성해보기

<middlewares/myLogger.js>

const myLogger = store => next => action => {
  console.log(action); // 먼저 액션을 출력합니다.
  const result = next(action); // 다음 미들웨어 (또는 리듀서) 에게 액션을 전달합니다.

  // 업데이트 이후의 상태를 조회합니다.
  console.log('\t', store.getState()); // '\t' 는 탭 문자 입니다.

  return result; // 여기서 반환하는 값은 dispatch(action)의 결과물이 됩니다. 기본: undefined
};

export default myLogger;

 

미들웨어 적용하기

import { applyMiddleware } from 'redux';

<index.js>

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

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

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

serviceWorker.unregister();

 

 

3. redux-logger 사용

 

$ yarn add redux-logger

<index.js>

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './modules';
import logger from 'redux-logger';

const store = createStore(rootReducer, applyMiddleware(logger)); // 여러개의 미들웨어를 적용 할 수 있습니다.

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

serviceWorker.unregister();

 

Redux DevTools 사용하기

$ yarn add redux-devtools-extension

import { composeWithDevTools } from 'redux-devtools-extension';

<index.js>

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './modules';
import logger from 'redux-logger';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(logger))
); // 여러개의 미들웨어를 적용 할 수 있습니다.

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


serviceWorker.unregister();

 

 

8. json-server => 가짜 연습용 서버 만들기!

 

https://react.vlpt.us/redux-middleware/08-json-server.html

8. json-server · GitBook

 

 

9. CORS와 WebpackDevServer Proxy

=> 브라우저의 현재 주소와 API 주소의 도메인이 일치하지 않을 때 CORS 설정할 필요없음

 

 브라우저 API를 요청할 때 백엔드 서버에 직접적으로 요청하지 않고, 현재 개발 서버의 주소로 요청한다.

 

https://react.vlpt.us/redux-middleware/09-cors-and-proxy.html

9. CORS 와 Webpack DevServer Proxy · GitBook