[React] 리덕스 미들웨어만들기

[React] 리덕스 미들웨어만들기

안녕하세요. 배워가며 성장하는 개발자 DevRappers입니다. 이번 포스팅에서는 리액트 Redux 미들웨어만들기에 대해서 포스팅하려고 합니다.

먼저 새로운 프로젝트를 만들어보겠습니다.

$ npx create-react-app learn-redux-middleware

그리고 해당 디렉터리에서 redux와 react-redux라이브러리를 설치해줍니다.

$ yarn add redux react-redux

먼저 미들웨어를 만들어보기전에 모듈과 컴포넌트를 구현해보도록 하겠습니다. 가볍게 counter를 만들어보겠습니다.

src디렉터리 밑에 modules디렉터리를 만들고 그안에 counter.js파일을 생성해줍니다.

// 액션 타입 const INCREASE = 'INCREASE'; const DECREASE = 'DECREASE'; // 액션 생성 함수 export const increase = () => ({ type: INCREASE }); export const decrease = () => ({ type: DECREASE }); // 초기값 const initialState = 0; // 리듀서 생성 export default function counter(state = initialState, action) { switch (action.type) { case INCREASE: return state + 1; case DECREASE: return state - 1; default: return state; } }

이런식으로 액션타입, 액션 생성 함수, 초기값, 리듀서를 만들어준 후

루트 리듀서를 만들어주도록 하겠습니다. modules디렉터리 밑에 index.js를 만들어줍니다.

import { combineReducers } from 'redux'; import counter from './counter'; const rootReducer = combineReducers({ counter }); export default rootReducer;

다음으로는 프로젝트에 리덕스를 적용시킵시다. 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 } from 'redux'; import { Provider } from 'react-redux'; import rootReducer from './modules'; const store = createStore(rootReducer); ReactDOM.render( , document.getElementById('root') ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();

이제 리덕스를 적용시켰으니 컴포넌트를 만들어줍시다. 먼저 프리젠테이셔널 컴포넌트를 만들어줍시다. src디렉터리 밑에 components디렉터리를 만들고 그 밑에 Counter.js파일을 만들어줍니다.

import React from 'react'; function Counter({ number, onIncrease, onDecrease }) { return ( {number} +1 -1 ); } export default Counter;

다음으로 컨테이너를 만들어줍시다. src밑에 containers디렉터리를 생성해주고 그 밑에 CounterContainer.js파일을 만들어줍시다.

import React from 'react'; import Counter from '../components/Counter'; import { useSelector, useDispatch } from 'react-redux'; import { increase, decrease } from '../modules/counter'; function CounterContainer() { const number = useSelector((state) => state.counter); const dispatch = useDispatch(); const onIncrease = () => { dispatch(increase()); }; const onDecrease = () => { dispatch(decrease()); }; return ; } export default CounterContainer;

이런식으로 구현해주고 App.js에서 CounterContainer를 사용해줍시다.

import React from 'react'; import CounterContainer from './containers/CounterContainer'; function App() { return ; } export default App;

이제 리덕스 미들웨어를 사용할준비가 되었습니다. 리덕스 미들웨어는 실무에서는 직접 만들게 되는 일은 거의 없다고 하지만 한번 만들어 보면서 이해하도록 하겠습니다.

리덕스 미들웨어를 만들 땐 다음과 같은 템플릿을 이용합니다.

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

첫번째 store는 리덕스 스토어 인스턴스입니다. 이 안에 dispatch, getStore, subscribe내장함수들이 들어있습니다.

두번째 next는 액션을 다음 미들웨어에게 전달하는 함수입니다. next(action)이런 형태로 사용합니다. 만약 미들웨어가 없다면 리듀서에게 액션을 전달해줍니다. next를 호출하지 않게 된다면 액션이 무시처리되어 리듀서에게 전달되지 않습니다.

세번째로 action은 현재 처리하고 있는 액션 객체입니다.

이제 직접 생성해보도록 하겠습니다.

src디렉터리 밑에 middlewares디렉터리를 만들어주고 그 밑에 myLogger.js파일을 만들어줍니다.

const myLogger = store => next => action => { console.log(action); // 먼저 액션을 출력합니다. const result = next(action); // 다음 미들웨어 (또는 리듀서) 에게 액션을 전달합니다. return result; // 여기서 반환하는 값은 dispatch(action)의 결과물이 됩니다. 기본: undefined }; export default myLogger;

이제 미들웨어를 만들어줬으니 적용시켜보도록 하겠습니다. 미들웨어를 스ㅗ어에 적용하려면 applyMiddleware라는 함수를 사용합니다. 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( , document.getElementById('root') ); serviceWorker.unregister();

이렇게 하면

이런식으로 액션이 잘 나오는 것을 확인할 수 있습니다. 이제 미들웨어를 조금 수정해보겠습니다. 액션이 리듀서까지 전달되고 난 후의 상태를 확인하고 싶다면 이런식으로 수정해주시면 됩니다.

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;

수정해주면 이런식으로 업데이트 후의 상태가 잘 나타나는 것을 확인할 수 있습니다.

이번 포스팅에서는 리덕스 미들웨어 만들어보기를 알아보았습니다. 이상 DevRappers입니다. 감사합니다.

from http://devrappers.tistory.com/88 by ccl(A) rewrite - 2020-03-06 03:54:24