스토어에 미들웨어를 적용했다면 CounterContainer 컴포넌트를 App 컴포넌트에 렌더링하여 잘 작동하는지 확인해 보세요. counter 리덕스 모듈이 변경되기는 했지만, 컨테이너 컴포넌트에서 수정해야 할 것은 없습니다. 왜냐하면, 기존에 사용 중이던 thunk 함수와 똑같은 이름으로 액션 생성 함수를 만들었기 때문이죠.

App.js

import React from 'react';
import CounterContainer from './containers/CounterContainer';

const App = () => {
  return (
    <div>
      <CounterContainer />
    </div>
  );
};

export default App;

---

 

여기서 리덕스 개발자 도구를 적용하여 어떤 액션이 디스패치되고 있는지 더 편하게 확인하겠습니다.

먼저 리덕스 개발자 도구 라이브러리를 설치하세요.

$ yarn add redux-devtools-extension