[React] 리액트에 리덕스 적용하기

스토어를 만들고 리액트 어플리케이션에 리덕스를 적용하는 작업은 src > index.js에서 이루어진다.

 

스토어 만들기

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import App from "./App";
import rootReducer from "./modules/index";

const store = createStore(rootReducer);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

✅index.js

 

Provider 컴포넌트를 사용하여 프로젝트에 리덕스 적용하기

리액트 컴포넌트에서 스토어를 사용할 수 있도록 App 컴포넌트를 react-redux에서 제공하는 Provider 컴포넌트로 감싸준다.

이 컴포넌트를 사용할 때에는 store를 props로 전달해주어야 한다.

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import App from "./App";
import rootReducer from "./modules/index";

const store = createStore(rootReducer);

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

✅index.js

 

Redux DevTools (크롬 확장 프로그램) 설치하기

Redux DevTools는 리덕스 개발자 도구이다. 크롬 확장 프로그램으로 설치하여 사용할 수 있다.

설치: yarn add redux-devtools-extension

 

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import App from "./App";
import rootReducer from "./modules/index";

const store = createStore(rootReducer, composeWithDevTools());

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

✅index.js

그리고 다음과 같이 composeWithDevTools()를 이용해서 적용시켜준다.

이제 브라우저 크롬 개발자 도구에서 Redux 탭을 보면 리덕스 개발자 도구가 잘 나타난다.

Redux 탭에서 State 버튼을 누르면 현재 리덕스 스토어 내부의 상태가 잘 보인다.