boilerplate(client) - Redux 적용하기

따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다.

 

Redux 적용

redux를 적용하기 위해서는 index.js의 일부분을 수정할 필요가 있다.

 

내용 추가 전 index.js

초기의 index.js는 다음과 같다.

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

Redux 연결 - Provider

react-redux의 provider를 이용해 react와 redux를 연결시켜 준다.

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux'

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

Reducer 생성

provider에 store를 삽입하기 위해서는 reducer를 생성해야 한다.

src 폴더 내에 reducer 폴더를 만들고 그 안에 index.js 파일을 만들었다.

나중에 user action과 관련된 reducer를 만들고 rootReducer 안에 넣어주면 된다.

정리하자면, 여기서는 여러 개의 reducer를 combineReducers()를 통해 rootReducer로 묶어주는 작업을 한다.

 

// reducer 폴더 내의 index.js

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
	// user
});

export default rootReducer;

 

 

Provider에 store 삽입

provider에 store를 삽입하기 위해서는 미들웨어가 필요하다.

원래의 redux store는 객체 액션만 받지만 미들웨어를 이용하면 promise와 function 모두 받을 수 있다.

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'antd/dist/antd.css';
import { Provider } from 'react-redux'
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducers/index'

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

 

Redux DevTools

크롬을 사용한다면 확장프로그램을 통해 Redux DevTools를 사용할 수 있다.

 

크롬 상단의 확장 프로그램을 누른 뒤 하단의 확장 프로그램 관리창으로 들어간다.

혹은 주소창에 chrome://extensions/ 을 입력하면 된다.

 

상단의 더보기란을 누른 후 Chrome 웹 스토어 열기를 통해 Chrome 웹 스토어로 들어간다.

검색창에 redux devtools를 입력 후 사진에 보이는 확장프로그램을 추가하면 된다.

 

앞서 provider에 store를 삽입하는 과정에서  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 을 인자로 넣어줌으로써 크롬에서 boilerplate에 대해 redux devtools를 사용할 수 있다.