Redux 기초

redux

store : 정보들이 저장되어 있는 공간

• state : 실제 정보 → 이때, 직접 접근 불가!!!
• reducer : 함수

store에 접근하기 전 거치는 함수들

• dispatch
• subscribe
• getState

render : state 값을 참조해서 UI를 만들어주는 개발자가 짜는 코드
state → getState → render

store의 값이 바뀔 때마다 render 함수가 실행될 수 있다면?
→ subscribe!

action이 dispatch에게 전달됨

1. reducer를 호출해서 state 값을 변경
   현재 state 값 전달, action 전달
   action을 참조해서 새로운 state 값을 만들어 return하는 state를 가공하는 가공자

2. subscribe함수를 호출해서 render 함수가 실행되도록

redux를 사용해서 !

redux를 사용해서 코드를 작성해보면

1. store 적용

function reducer(state, action) {
	if(state === undefined) {
		return { color: 'yellow' }
	}
}

const store = Redux.createStore(reducer);
function red() {
	const state = store.getState();
                
	document.querySelector('#red').innerHTML = `
		<div class="container" id="component_red" style="background-color:${state.color}">
...

• store를 만들면 내부적인 값으로 state가 생성된다.
• 이때, state 값을 가져올 땐, getState()로 가져온다.
• reducer를 통해서 state 값을 만드는데,
• 이때, 기존 state 값이 undefined 일때, 초기화를 위한 reducer 실행 로직이다.

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

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

• dispatch를 통해 reducer를 호출하면 state 값 변경해서 return 한다.
• reducer() 는 이전의 state 값과 action을 받아서 변경된 state 값을 리턴해주는 함수
• 이때, state를 복제하고 그 복제한 것을 변경해 그걸 리턴하자!!
  객체 복사
  Object.assign({}, {name:'egoing'}, {city: 'seoul'}); // 1. 빈객체, 2. 빈객체를 복제할 속성을 주면됨
  결과값 → {name: 'egoing', city: 'seoul'}
  이때, 2개의 객체가 같은 프로퍼티를 가지고 있다면 그 값을 덮어써준다.

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

subscribe에 render를 등록해놓으면 된다.

store.subscribe(red);
red();

redux가 없다면...

redux가 없다면 컴포넌트 간의 의존성이 강하다.
따라서 컴포넌트가 변경되거나 추가되면 연결되어 있는 컴포넌트들 모두 변경되어야 하는 문제점이 있다.

redux를 사용하면

redux를 사용하면, 컴포넌트들이 상호작용할 때의 의존성을 낮출 수 있다.
store를 만들어 구독(등록)/발행(데이터전달) 기능과 중앙집중적 관리 체계를 통해 element 간의 의존성을 갖지 못하게 한다.
이는, element 자체를 독립적으로 존재하게 하며, 모듈화의 기본 형태를 갖추게 된다.