Redux 개념

Redux의 특징

리덕스는 코드의 복잡성을 낮춰주고, 어떤 결과를 가져올지 예측 가능하게 만들어준다.

리덕스는 리덕스 그 자체로 실행이 가능하다!

1. Single Source of Truth - 1개의 상태
   1. 단 1개의 store
2. 1개의 state에 모든 데이터를 넣는다.
3. 인가된 담당자(특정 함수)를 통해서만 값을 수정한다.
   1. 개발자가 직접 값을 수정할 수 없다.
   2. reducer
   3. dispatcher
4. 데이터를 가져갈 때도, 함부로 가져가지 못한다.
   1. 데이터를 외부에서 직접적으로 제어할 수 없다.
   2. 예기치 않게, state가 바뀌는 것을 사전에 차단하여 예측 가능하도록 한다.
5. state 값이 바뀔 때마다, 전화를 걸어서, 데이터가 바뀌었으니, 자기가 해야할 일을 하도록 하라고 말해준다.
   1. 각각의 애플리케이션은 서로에게 신경 쓸 필요 없이 자기 할 일만 하면 된다.
6. Undo/Redo를 쉽게 할 수 있다. ⇒ 독립된 형태 유지, 불변
   1. 값을 바꿀 때, 원본을 직접 바꾸지 않고, 원본을 복제 → 복제한 데이터 수정 → 새로운 원본 만드는 방식
7. 이전의 상태에 대해서도 디버깅 가능
8. 모듈 리로딩 ⇒ 코드 작성하면 자동으로 우리가 작성한 코드가 애플리케이션에 반영

---

Redux의 장점

리덕스가 없을 때는 컴포넌트의 커플링, 즉 서로 간의 의존성이 매우 높음
리덕스가 있으면 각각 컴포넌트를 독립적으로 코딩 가능
컴포넌트의 로직 자체에 집중해서 코딩 가능

1. 중앙집중적인 data Store을 통해 전역 상태 관리 → 로직 간소화
2. redux dev tool → 변화를 다 볼 수 있음 → Time-Traveling을 통한 좀 더 쉬운 디버깅

---

Redux의 개념

1. 리덕스의 핵심은 store

   1. store는 정보가 저장되는 곳

   2. store 안에는 state라는 실제 정보가 저장됨

      state는 절대 직접 접속이 불가. 누군가를 통해야 한다.

2. reducer : UI를 만들어줄, 개발자가 작성할 코드 부분
3. store에 접근 하기 전, 일종의 창구 직원 역할 ⇒ dispatch, subscribe, getState
4. render는 state 값을 참조해서, UI를 제작
5. state가 바뀔 때마다, render가 호출되게할 때, subscribe를 사용

---

Redux의 로직

1. submit을 눌렀을 때, 객체 하나를 전송. 이 객체를 action이라 한다.
2. 이 action은 dispatch에 전달된다.
3. dispatch는 2가지 일을 한다.
   1. reducer를 호출해, state 값을 바꾼다.
   2. reducer에 현재의 state 값과, action 값을 준다.
4. reducer의 return하는 객체는 state의 새로운 값이 된다.
5. reducer는 state를 입력 값으로 가지고, action을 참조해서, 새로운 state 값을 만들어 return 해주는 state 가공자이다.
6. 이후 subscribe를 이용해 render을 호출한다.
7. 새로운 state에 맞게 UI가 변한다.

---

Redux 실습

store 초기 세팅

1. store 만들기 → state가 store 안에 자동으로 생성
2. reducer라는 함수 만들기 → store에 주입

state 값 변경하기

action

• 고유한 값
• payload는 생략가능, 다른이름 가능 (스토어 데이터 초기화할 때)

{
	type : '',
	payload : ''
}

1. console.log(state, action) 하면 처음은 무조건 값이 한번 실행됨

2. fire을 클릭하면 dispatch함수가 reducer에 action을 전달하게 된다.

   이전 state와 현재 action 값 → 이전 state, 새로 바꿔줄 state로 보면 됨

3. return {color:’red’} 해주면 store의 값이 바뀜

Reducer

//function 형태
function reducer(state, action){return state;}

//arrow function 형태
(state, action) => {return state;}

render 함수 호출

//state가 바뀔때마다 red 함수가 호출 (render)
      store.subscribe(red);
      red();

---

Redux Dev tools

with Chrome

해당 코드를 추가

let store = Redux.createStore(
        reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
      );

이런식으로 time-traveling도 가능

플레이버튼을 누르면 리플레이, 뒤로감기도 가능

console.log

console.log(action.type, action, state, newState);

redux는 1개의 store를 가지고 있기 때문에 이런 식으로 확인 가능

---

지금까지 Redux의 기본 개념에 대해 알아보았다. React에 직접 사용하는 방법 보다는 Redux 그 자체의 개념을 설명해 놓았기 때문에, 다음에는 react-redux, redux-toolkit에 대해 알아보기로 하자.

참고자료

• 생활코딩 redux