react redux가 아닌 기본 redux에 대한 내용입니다. (출처 - 생활코딩)

🟣 Redux

A predictable state container for Javascript apps.
(자바스크립트 앱을 위한 예측 가능한 상태 저장소)

1. Redux의 3가지 원칙

• Single Source of Truth
  하나의 store, 하나의 state 객체를 갖는다. 중앙 집중적으로 상태가 관리된다.

• State is read-only
  state를 직접 변경하는 것은 불가능하며, state의 변경을 위해서는 action이라는 객체를 이용해야 한다.

• Changes are made with pure functions
  reducer를 통해 상태 변화에 대해 예측이 가능하다.

2. redux의 특징

• store는 외부로부터 철저하게 차단되어야 한다.
• 데이터를 외부에서 직접적으로 제어할 수 없기 때문에 예기치 않은 상태값 변경을 차단하여 예측 가능하게 한다.
• 담당 함수(dispatch, reducer, getState)를 통해서만 관리될 수 있다.
• state가 변경될 때마다 state의 데이터를 사용하는 모든 곳에 각각에게 해당하는 명령을 내릴 수 있다.
• react 뿐 아니라 순수 javascript에서도 훌륭하게 작동한다.

3. redux의 장점

• 각각의 상태 변화가 서로에게 영향을 전혀 주지 않으며 각 부품이 독립적이다.
• state의 복제본을 이용해 값을 변경하므로 undo, redo가 쉽다.
• 과거의 상태 기록을 통해 디버깅을 쉽게 할 수 있다.
• Hot module reloading이 가능하다. -> 이해 필요

4. Redux 개념들

🟣 state

• 실제로 정보가 저장되는 곳으로 직접 건드리는 것은 불가능하여 전용 함수들을 거쳐야 한다.
• store를 생성하면 자동으로 그 안에 state도 생성된다.

🟣 reducer

• createStore의 인자로 넘어가는 함수로, reducer를 구현하는 것이 redux를 만드는 일의 상당 부분을 차지한다. 새로운 state 값을 가공하여 리턴한다.

function reducer(oldState, action) (
  // ...
}

var store = Redux.createStore(reducer);

🟣 render

• getState를 통해 받은 state 값을 이용하여 UI를 만들고 화면을 그린다.

function render() {
  var state = store.getState();
  // ...
  document.querySelector('#app').innerHTML = `
	<h1>REDUX</h1>
	...
	`
}

🟣 subscriber

• subscriber에 render를 등록하면 state가 변경될 때마다 render가 호출되며 UI가 갱신된다.

store.subscribe(render);

🟣 dispatch

• type과 action을 전달받아,
  1. 현재의 state와 action을 넘겨주며 reducer를 호출하여 state의 값을 바꾼다.
  2. 이후 subscribe를 이용하여 render를 호출한다.

store.dispatch({type:'create', action});

5. Redux 작동 방식 🕹

1. redux install (cdn 혹은 npm install 이용)

2. createStore 메소드를 이용해 store를 생성한다. -> state가 자동 생성된다.

let store = Redux.createStore(reducer);

3. reducer 함수를 만들어 store에 주입해준다. 현재의 state 값과 dispatch를 통해 받은 action을 인자로 넘긴다.

function reducer (state, action) { }

4. reducer 함수에서 state의 초기값을 설정해준다. reducer 함수는 최초 한번 무조건 실행된다.

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

5. state 값을 가져오고 싶을 때는 getState 함수를 호출한다.

let state = store.getState();
console.log(state); // { color: 'yellow' } 출력

6. (이벤트 등을 통해) state 값을 변경하고자 할 때는 action을 dispatch에게 넘겨주면 dispatch가 기존의 state 값과 action을 넘기면서 reducer를 호출한다. action에 type은 무조건 입력해주어야 한다.

store.dispatch({type: 'CHANGE_COLOR', color: 'red'});

reducer 함수는 변경된 state 값을 리턴한다. 주의할 점은 state를 그대로 수정하여 리턴하지 않고 state를 복제하여 복제된 state를 수정하여 리턴해야 한다. (그래야 예측 가능하게 동작시킬 수 있다.)

function reducer(state, action) {
  // 초기값 세팅
  if (state === undefined) {
    return { color: 'yellow' };
  }
  // 전달받은 action type에 따른 state 변경 (state 복제본을 통해)
  let newState;
  if (action.type === 'CHANGE_COLOR') {
    newState = Object.assign({}, state, {color: action.color});
  }
  // 변경된 state 값 리턴
  return newState;
}

하지만 예시에서 state의 color를 red로 변경해주어도, 당장 UI 색이 red로 변하지는 않는다. reducer는 store의 state 값을 변경시킬 뿐이다. 이 변화를 UI에 반영시키지는 않는다. 이는 render가 담당한다.

7. subscribe에 render를 등록해두면 state 값이 바뀔 때마다 UI가 변경된다.

store.subscribe(render);

6. Redux를 통한 시간 여행

chrome 확장 프로그램 "redux dev tool"의 설치가 필요하다.

• 상태 관리 라이브러리는 Redux 말고도 다양하지만, 시간 여행은 흔하지 않다.
• 불변성으로 인해 각각의 state 들은 독립적이기 때문에 시간 여행이 가능하다.
• state log를 다운로드/업로드 할 수 있다. -> 디버깅에 매우 용이