[MernStack] Blog 만들기 11. Front에 사용할 라이브러리 설치(Redux)

아직 나는 Front쪽에 많이 약하다. 아니 처음이다.
아직 공부중인걸 바탕으로 작성하니 많이 틀린 내용이 있을 수 있지만 현재 내가 듣고 있는 강의를 기반으로 작성한다.

만약 잘못된 정보가 있으면 지적해주면 감사히 받아 들이겠습니다.

 

---

1.필요한 라이브러리를 설치

client폴더로 이동후 설치를 한다. 꼭 client폴더로 이동하자!

$> npm i redux react-redux redux-saga react-router-dom connected-react-router bootstrap reactstrap dotenv

<설치목록>
-redux
- react-redux 
- react-saga
- react-router-dom
- connected-react-router
- bootstrap
- reactstrap
- dotenv

2. 작업할 폴더 생성

redux 폴더안에 reducers와 sagas라는 이름으로 폴더를 생성후 

reducers폴더안에 index.js 파일 생성,
sagas폴더안에 index.js 파일 생성 한다.

 

3. reducers의 index.js생성

< reducers- index.js>

import {combineReducers} from 'redux';
import {connectRouter} from 'connected-react-router'

const createRootReducer = (history) => combineReducers(
    {router: connectRouter(history)}
);

export default createRootReducer;

 

4. sagas의 index.js생성

$> npm i morgan

log를 관리해주는 morgan이라는 라이브러리를 설치해준다.

< sagas- index.js>

import { format } from "morgan";
import {all} from 'redux-saga/effects'


export default function* rootSaga(){ //제네레이터 함수 .. 여러값을 반환할수 있음 .
    yield all([]);
}

주석에 써진것처럼 function*함수는 제네레이터 함수로 일반함수와 다르게 여러값을 반환할 수 있다.

 

우선 여기서 reducers와 sagas가 하는일은
reducers는 요청을 받고 처리하는 곳이라고 한다.( 예를 들면 로그인 실패,로그인 성공..등등)
sagas는 reducers에서 요청을 받고 처리할때 사용하는 함수들을 정의 하는 곳이다.
( 아직 돌려보지 않았으므로 자세하게 적지는 못한다. // 추후 추가 작성 ) 

 

 

4. src의 store.js 생성 

$> npm i history

먼저 history를 설치한다.

< store.js>

import {createStore, compose, applyMiddleware} from 'redux'
import createSagaMiddleware from 'redux-saga'
import {createBrowserHistory} from 'history'
import { routerMiddleware } from 'connected-react-router'

import createRootReducer from './redux/reducers/index'
import rootSaga from './redux/sagas'

export const history = createBrowserHistory()

const sagaMiddleware = createSagaMiddleware();

const initialState = {}

const middlewares = [sagaMiddleware, routerMiddleware(history)]
const devtools = window.__REDUX_DEVTOOLS_EXTENTION_COMPOSE__

const composeEnhancer = process.env.NODE_ENV === "production"
    ? compose
    : devtools || compose;           // 배포시 개발자 도구를 삭제 하기위한 코드 

const  store = createStore(
    createRootReducer(history),
    initialState, //웹에 모든 상태를 담고 있는 초기갑ㅅ // 모든 갑을 store에서 다 저장함.
    composeEnhancer(applyMiddleware(...middlewares))
)
sagaMiddleware.run(rootSaga)

export default store

store의 역할은 모든 값을 store에서 저장후 필요할때 store에서 꺼내 쓴다고 한다.
예를 들면... abcde
E의 부모노드는 D이고
D의 부모노드는 C이고 
C의 부모노드는 B이고
B의 부모노드는 A이다.

E에서 작업을 하고 있고 어떠한 값을 사용중이였다고 치자.
그 값은 최상위 노드인 A에서 생성된 값인데
그 값의 위치를 찾기위해 상위 노드 D를 찾아보고 D에 없으니 C를 찾아보고.. C에도 없으니 B를 찾아본다.
이런 번거러움을 없애고 편의성을 위해 웹에 모든 상태를 담고 있는 값을 store에 담아 사용한다.

 

 

---

대박이네 여기..