[Redux] ⛓ 리덕스 미들웨어란 무엇인가? (2)

본 글은 도서 '리액트를 다루는 기술'을 공부하며 정리한 글입니다.

리덕스를 통한 카운터 만들기

카운터를 만들어 보는 것은 리덕스의 가장 기초가 되는 예제입니다. 리덕스 미들웨어에 대해서 공부할 예정이기 때문에 카운터에 대한 설명은 생략하겠습니다.

yarn add redux react-redux redux-actions

 

-module/counter.js

import { createAction, handleActions } from "redux-actions";

const INCREASE = "counter/INCREASE";
const DECREASE = "counter/DECREASE";

export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);

const initialState = 0;

const counter = handleActions(
  {
    [INCREASE]: (state) => state + 1,
    [DECREASE]: (state) => state - 1,
  },
  initialState
);

export default counter;

 

-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 { createStore } from "redux";
import { Provider } from "react-redux";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import rootReducer from "./modules";

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  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();

 

-components/Counter.js

import React from "react";

const Counter = ({ onIncrease, onDecrease, number }) => {
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onDecrease}>-1</button>
      <button onClick={onIncrease}>+1</button>
    </div>
  );
};

export default Counter;

 

-containers/CounterContainer.js

import React from "react";
import { connect } from "react-redux";
import { increase, decrease } from "../modules/counter";
import Counter from "../components/Counter";

const CounterContainer = ({ number, increase, decrease }) => {
  return (
    <div>
      <Counter number={number} onIncrease={increase} onDecrease={decrease} />
    </div>
  );
};

export default connect((state) => ({ number: state.counter }), {
  increase,
  decrease,
})(CounterContainer);

 

-App.js

import React from "react";
import "./App.css";
import CounterContainer from "./containers/CounterContainer";

function App() {
  return (
    <div className="App">
      <CounterContainer />
    </div>
  );
}

export default App;

로그 미들웨어 만들기

로그 미들웨어의 역할은 액션이 전달되었을 때, 이전 상태, 액션 정보, 새로운 상태를 기록하는 미들웨어입니다.

 

-lib/logger.js

const loggerMiddleware = (store) => (next) => (action) => {
  console.group(action && action.type);
  console.log("이전상태", store.getState());
  console.log("액션", action);
  next(action);
  console.log("다음 상태", store.getState());
  console.groupEnd();
};

export default loggerMiddleware;

 

-index.js

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

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  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();

 

 

미들웨어의 적용 방법을 알아보기 위해서 logger 미들웨어를 만들었지만, 이미 공개되어 있는 라이브러리인 redux-logger가 있습니다. 이를 사용하면 보다 잘 만들어진 logger를 사용할 수 있습니다.