이고잉 님이 제작한 리덕스 강의 내용을 정리한 포스트입니다
생활코딩 - Redux

🔎 리덕스란?

자바스크립트를 위한, 예측 가능한 상태 저장소

---

• 데이터를 스토어에서 집중관리
• state를 직접적으로 바꿀 수 X
• getState를 통해서만 제어가 가능
• 예기치 않게 state 값이 바뀌는 것을 방지
• 여러 부품들에 state 변경값을 일괄적으로 전달
• 원본 복제본을 수정(데이터 원본 수정X)
• 각각의 데이터를 독립적으로 유지
  

🔎 state와 render의 관계

---

• redux의 핵심인 store는 정보가 저장되는 은행 개념
• store 안에는 실제 정보가 저장되는 state가 있음 state는 직접적으로 접속하는 것이 불가

스토어 생성

function reducer(oldState, action) {
	//...
}
var store = Redux.createStore(reducer);

render 함수

function render() {
	// getState를 통해서 state값을 가져와서
	var store = store.getState();
	//...
	// 여기서 변경된 상태값을 UI에 출력
	document.querySelector('#app').innerHTML = `
		<h1>WEB<h1>
		....
	`
}

subscribe 함수

store.subscribe(render);
// state의 값이 바뀔 때마다 render함수를 호출해 UI를 갱신시킴

🔎 action과 reducer

---

• reducer를 호출해서 state의 값을 변경하는데 이때 이전 상태와 액션 객체를 파라미터로 받음
• subscribe을 이용해서 렌더함수를 호출 -> 화면 갱신
• reducer가 리턴하는 값 = 새로운 state값 => 렌더 재호출 => UI 갱신

dispatch 함수

• store.dispatch 를 이용해 객체를 전송
• 여기서 type: 'create' 해당 객체를 action이라고 하며 반드시 가지고 있어야 하는 값임

<form onsubmit="

//...

store.dispatch({type: 'create', payload: {title: title, desc: desc}});

">

reducer 함수

function reducer(state, action){
		if(action.type === 'create'){
				var NewContents = oldState.contents.concat();
				var newMaxId = oldState.MaxId+1;
				NewContents.push({id: newMaxId, title: action.payload.title});
				return Object.assign({}, state, {
						contents: newContents,
						maxId: newMaxId,
						mode: 'read',
						selectedId: newMaxId
				});

🔎 Redux가 좋은 가장 중요한 이유

---

• 중앙집중적인 데이터 스토어를 통해서 어플리케이션을 쉽게 개발할 수 있다
• 시간여행을 할 수 있다(?) 시간여행에 관한 포스트는 여기

📌 데이터가 집중화(Centralized) 되어 있어서 예측 가능하며(Predictable) 데이터 흐름이 단방향이라서 디버깅하기 쉽다(Debuggable). 또 리덕스와 연관된 좋은 생태계가 구축되어 있어서 필요에 맞게 유연하게(Flexible) 구현할 수 있다.
📄 참조: 리덕스(Redux)는 왜 쓰는 건데!?

📝 정리

---

• 하나의 애플리케이션에는 단 하나의 단일 스토어만을 권장

dispatch: 값을 변경시키고
getState: 변경된 값을 가져오고
subscribe: 값이 변경됐을 때 구동될 함수를 등록
reducer: state의 값을 변경