15. boilerplate - redux 세팅

boilerplate 유튜브 강의 시리즈

Blog ReactJS NodeJS #22 Setting up REDUX

 

redux란? 필요한 이유? 기본 개념 --> 여기에 잘 나와있다..

 

아래 글은 학습하는 과정에서 혼자 이해한 내용을 정리한 것이니 참고만..

 

react는 컴포넌트 기반으로 구성되어 화면(UI - user interface)을 구성하는 것을 좀 더 편리하게 다룰 수 있다.

각각의 컴포넌트들은 state를 가지는데 이 state를 기반으로 변화가 발생한 컴포넌트만 변경되는 로직이 수행된다.

즉, state를 통해 view를 관리한다.

또 하나의 특징으로 react의 데이터흐름은 단방향으로만 진행된다. 그래서 컴포넌트가 많아지게 되면 최상위 컴포넌트에서 최하단 컴포넌트까지의 데이터 전달이 복잡해지게 된다. 이처럼 상태 관리가 복잡해지기 때문에 이를 해결하기 위해 나온 것이 redux이다. redux는 하나의 global한 store에 모든 state를 저장하고 원하는 컴포넌트로 곧바로 data를 전달할 수 있어 이러한 문제가 해결된다. (라고 이해했다..)

 

1. redux 설치

 

우선 아래 모듈들을 모두 설치한다.

이 글을 작성하는 시점은 아직 해당 모듈들을 적용하기 전인 상태(학습중)라 정확히 어떤 쓰임새인지는 잘 모르겠다.

이후의 강의를 들으면서 천천히 알아가야겠다.

 

• react-redux : redux를 컴포넌트 상에서 더 간편하게 사용 할 수 있게 해 주는 라이브러리. 컴포넌트에서 store 를 props 으로 받아오거나, subscribe 를 직접 할 필요가 없다.
• redux : predictable state container for JavaScript apps.
• redux-promise : FSA-compliant promise middleware for Redux. (FSA : flux standard action)
• redux-thunk : 비동기 작업시 가장 많이 사용하는 미들웨어 (자세한 설명)

 

npm install react-redux redux redux-promise redux-thunk --save

 

2. redux devtools extension 설치

redux를 위한 개발자 도구인 redux-devtools-extension을 크롬 웹 스토어에서 설치한다. (참고)

 

 

3. client의 root index.js

위에서 설치한 redux관련 모듈과 redux-devtools-extension을 적용

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom';

import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';

import Reducer from './reducers';

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

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(Reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())}>
  <BrowserRouter>
    <App />
  </BrowserRouter>
  </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();

 

4. actions, reducers 폴더를 생성하고 파일 생성