💻 Redux - 개념잡기 💫

💡 리덕스란 ?

JS로 만든 APP 들을 위한 예측가능한 상태의 저장소

• 단일 스토어 ( App 의 상태가 궁금할때는 reducer 이용 )
• 중앙 집중적인 데이터 스토어를 통해 앱을 쉽게 개발
• Redux dev Tool 을 통해 파일 다운 -> Import -> 내역 복원 가능
  (시간 여행 가능 ! : 내가 선택하고 바꾼 값을 비디오처럼 확인 가능)
• 부품끼리의 의존적이지 않은 코드

👉 리덕스 동작

• state
• render : state를 기반으로 화면에 그린다.
• dispatch : 값 변경하기
• subscribe : 값이 변경되었을때 구동될 함수를 등록
• getState : 값 가져오기
  state 에 직접 접근하는것이 금지되어있기 때문에 해당 동작들을 이용한다.
• reducer: state 값을 변경한다.
  state 라는 문서에 값을 수정하는 사람이라고 생각!

👉 reducer 초기화

 function reducer (state, action){
 	if(state === undefined){
           // 최초의 초기화 단계 
           // state 값이 정의되어 있지 않는 상태에서 reducer 가 호출되었다.
            return { color: "yellow"}
        }
    }

    var store = Redux.createStore(reducer);

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

👉 Reducer의 역할

// reducer function 안에서..
 var newState;
if(action.type === "CHANGE_COLOR"){
  newState = Object.assign({}, state, {color: action.color})
  // 두번째 인자가 첫번째 빈 객체에 복제되서 그 객체가 리턴된다. 
  // 세번째 인자가 덮어쓰게된다.  -> 그 결과를 리턴
  // 불변성 때문에 복제 방법 사용
}
return newState

• store 의 state 값을 변경해준다.
• action의 state 값과 이전의 state 값을 이용해서 새로운 state 값을 return 해주면, 그 return 된 값이 새로운 state값이 된다
  원본을 바꾸는 것이 아닌 복제한 결과를 return 해야 함 (Redux를 최대한으로 활용 하기 위해서)

👉 Subscribe 의 역할

• state의 값이 변동되는지 구독 -> subscribe

store.subscribe(구독할 함수이름)

🐥샘플코드 : main.html

출처 : 생활코딩 Redux
https://www.inflearn.com/course/redux-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9