Redux 뽀개기 1

❓ Redux를 사용하는 이유

컴포넌트끼리 데이터를 주고 받아야 한다면?
React는 일방향 데이터 흐름을 가지기 때문에 자식간의 다이렉트 데이터 전달은 불가능하므로 항상 부모 컴포넌트를 통해 주고 받아야 한다.

(번거롭고 힘겨워 보인다) / 이미지 출처 : React Training

하지만 너무 많은 props를 내려야 하거나 깊숙한 곳의 컴포넌트에 전달해야 한다면? 과정이 많아 질 수록 props를 추적하기 힘들어지고 유지보수도 힘들어지는 문제가 생긴다 =>Pros Drilling

이러한 문제점을 해결하기 위한 상태관리 라이브러리(State Management Tools)가 Redux이다.
(MobX, recoil 등 다른 라이브러리도 있다)

(훨씬 간결하다) 이미지 출처 : React Training

(이렇게 보니 안 간결하다)

✏️ Redux를 쓰면 좋은 점?

1. 상태의 중앙화

• state를 쉽게 저장하고 불러올 수 있다
  상태를 모두 store에서만 관리하기 때문에 호출이 쉽다

2. 읽기 전용 상태

• 상태 읽기 전용이기때문에 변경이 불가하고, 변경하기 위해선 기존 상태에 새 상태를 덮어씌우는 식으로 변경한다. Redux Undo라는 라이브러리로 실행 취소 기능을 사용할 수 있다.

redux를 시작하기 전 알고가야 할 개념정리를 먼저 뽀개장

1. State

저장하고 있는 상태값(aka.데이터)
딕셔너리 형태({[key]:value}) 형태로 보관한다

2. Action

상태에 변화가 필요할 때 (= 가지고 있는 데이터를 변경할 때) Store에 접근하기 위해 발생한다

Action: 똑똑 store님,, 거 문 좀 열어 주십쇼,,~

Reducer가 Action과 이전의 state를 참고하여 새로운 state를 만들기 때문에 reducer가 구분할 수 있도록 객체 형식으로 이뤄진다.

{
	type : '액션의 종류를 한번에 식별할 수 있는 문자열 or 심볼'
	payload : '액션의 실행헤 필요한 임의의 데이터'
}

3. Action Creator

함수를 통해 액션을 생성해서 액션 객체로 return 해준다
하나의 액션 객체는 하나의 함수를 필요로 한다.

const actionCreator = (new_data) => {
return {
type: 'TEST',
data: new_data
};

4. Reducer

액션을 주면 그 액션이 적용되어 달라진 (안 달라질수도...있음) 결과를 만들어 낸다.
=> 이전 State와 Action을 합쳐, 새로운 state를 만드는 조작

🤷‍♀️ pure한 함수여야한다

• 파라미터 외의 값에 의존하지 하지 않는다.
• 이전 상태는 건드리지 않는다.
• 파라미터가 같으면, 항상 같은 값을 반환한다. (새로운 객체를 리턴해야 함)

🤷‍♀️ immutable

• 리듀서를 통해 state가 달라짐을 리듀서가 인지하는 방식
• 리듀서는 이전 상태와 액션을 파라미터로 받는다.

❗️주의할 점

• 인수들을 변경해서는 안된다.
• API호출이나 라우팅 처럼 Side Effect를 야기하는 것들을 사용해서는 안된다.

function reducer(previousState, action){
return newState
};

액션 생성함수로 -> 액션 만들고 -> 리듀서가 현재 상태(=데이터)와 액션 객체를 받아서 -> 새 데이터를 만들고 -> 리턴
** state를 직접 변경은 불가능하다!(읽기 전용)
가지고 있는 값을 새로운 값으로 만들어서 action으로만 변경~~

5. store

action에 따라 상태를 수정하는 reducer를 저장하는 단 하나의 객체
어플리케이션의 상태 값을 내장하며, 상태가 관리되는 곳

store의 몇가지 내장 함수들

dispatch

store.dispatch(action)

• 디스패치는 액션을 발생 시키는 것, 상태를 업데이트하는 유일한 방법
• 액션을 파라미터로 전달 -> 디스패치 액션이라고 한다
  -> 스토어는 리듀서 함수를 실행시켜 새 상태로 만들어준다.

subscribe

store.subscribe()

• 함수 형태의 값을 파라미터로 받아온다.
• 잘 안 쓴다... 뭐 공부해서 적어놨는데 이해가 안돼서 나중에 다시 적어놓겠음
• 리듀서에 연결된 컴포넌트를 subscribe(구독)한다고 한다.
  리듀서는 유튜버 컴포넌트는 구독자라 생각하련다 ...

createStore

• 스토어를 만들어주는 함수
• 리액트는 프로젝트마다 하나의 스토어만 사용한다.

import { createStore } from 'redux'
let store = createStore(reducer)

참고
https://tkssharma.gitbook.io/react-training/day-01/react-js-3-principles/one-way-data-flow
https://medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%EA%B2%8C-%EC%A0%9C%EC%9D%BC-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%AC%EC%9A%B8%EA%B1%B8%EC%9A%94-react-redux-%ED%94%8C%EB%A1%9C%EC%9A%B0%EC%9D%98-%EC%9D%B4%ED%95%B4-1585e911a0a6