[redux] 애증의 redux 2일 차

* redux 적용

1. store 생성

- store를 만들어 state를 변경해야 함, store은 하나만 존재

- reducer라는 함수를 store에 주입해야 함

- reducer의 역할 : dispatch에 의해 action이 들어오면 reducer가 action 값과 기존의 있었던 state의 값을 참조해서 새로운 state 값을 만들어줌(state 값 변경)

=> state와 action을 인자로 받음 + state의 초기값 정의

function reducer(state, action) {
	if(state === undefined){
    	// 색깔 바꿔줘야 하는 예시라 컬러로 리턴 & 초기 state 값을 yellow로
    	return {color:"yellow"}
    }
}

var store = Redux.createStore(reducer);

// state값 가져오기
console.log(store.getState());

function red() {
	var state = store.getState();
    document.querySelector('#red').innerHTML = `
    	<div style="background-color:{state.color}">
        </div>
    `
}

 

2. reducer와 action을 이용해서 새로운 state 값 만들기

새로운 state는 원본을 바꾼 것이 아니라 원본의 복제본을 바꾼 것!!

function reducer(state, action) {
	// 첫 번째 함수 호출 시 노란색
	if(state === undefined){
    	return {color:"yellow"}
    }
    
    // action이 change color면 빨간색 => but 이렇게 하면 다른 기능들 사용불가해서 지양하기
	if(action.type==='CHANGE_COLOR'){
    	state.color = 'red';
    }
    
    // 위의 방법 대신 state를 복제해서 변경하는 방법 사용하기 => 각각의 state가 독립되어 있음
    var newState;
    if(action.type==='CHANGE_COLOR'){
    	newState = Object.assign({}, state, {color:'red'})
    }
    
    return newState;
}

var store = Redux.createStore(reducer);

function red() {
	var state = store.getState();
    document.querySelector('#red').innerHTML = `
    	<div style="background-color:{state.color}">
        </div>
        <input type="button" value="fire" onClick="store.dispatch({type:'CHANGE_COLOR', color:'red'})"/>
    `
}

 

3. state의 변화에 따라서 UI 반영하기

subscribe에 render 등록해서 state 바뀔 때마다 render 호출하기!!

function reducer(state, action) {
	if(state === undefined){
    	return {color:"yellow"}
    }
    
	if(action.type==='CHANGE_COLOR'){
    	state.color = 'red';
    }

    var newState;
    if(action.type==='CHANGE_COLOR'){
    	newState = Object.assign({}, state, {color: action.color})
    }
    return newState;
}

var store = Redux.createStore(reducer);

function red() {
	var state = store.getState();
    document.querySelector('#red').innerHTML = `
    	<div style="background-color:{state.color}">
        </div>
        <input type="button" value="fire" onClick="store.dispatch({type:'CHANGE_COLOR', color:'red'})"/>
    `
}

store.subscribe(red);
red();

 

4. Redux 선물: 시간여행과 로깅

redux dev tools를 활용 => 시간여행 가능하고 log 파일도 다운 가능

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

Redux DevTools

 

 const store = createStore(
   reducer, 
   // 아래 코드 추가해줘야 함
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

 

개발자도구에 redux가 추가됨

 

시간여행을 할 수 있는 이유는 reducer로 state를 변경할 때 원본을 건드리는 게 아니라 원본의 복사본을 바꾸는 거라 다 독립적이기 때문에 시간여행이 가능 => "불변성"

 

Resources

https://www.inflearn.com/course/redux-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9/dashboard

[무료] 생활코딩 - Redux - 인프런 | 강의

---

redux를 사용하면 컴포넌트 간의 의존성을 낮출 수 있다

redux를 통해 중앙 집중형 관리를 하면 각 컴포넌트의 코드를 수정해도 action을 store에 dispatch로 통보하면 되고,

다른 컴포넌트가 코드 수정의 영향을 받지 않는다

또한, redux를 사용하지 않는다면 부모에서 자식 컴포넌트로 값을 전달해서 사용해야 했다

redux는 이런 부모와 자식 컴포넌트의 관계를 끊어 값을 전달할 필요없게 만든다