Redux - 상태관리 라이브러리

Redux가 왜 필요한가?

• react에서 상태를 변경할때 불필요한 컴포넌트들을 거치는 과정을 전역상태를 관리할 수 있는 저장소인 Store를 제공함으로써 해결해줄 수 있다.

Redux의 구조

• Redux의 상태관리 순서
  1. 상태가 변경되어야하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action객체가 생성

  2. Action객체가 Dispatch함수의 인자로 전달

  3. Dispatch함수는 Action객체를 Reducer함수로 전달

  4. Reducer함수는 Action객체의 값을 확인하고, 그 값에 따라 전역상태 저장소 Store의 상태변경

  5. 상태가 변경되면, React는 화면을 다시 렌더링

     즉, Action -> Dispatch -> Reducer -> Store 순서로 데이터가 단방향으로 흐름

• Store
  - store는 상태가 관리되는 오직 하나뿐인 저장소의 역할.
  - createStore메서드를 활용해 Reducer를 연결해서 Store생성
  

import { createStore } from 'redux';

const store = createStore(rootReducer);

• Reducer
  - Dispatch에게 전달받은 Action객체의 type값에 따라서 상태를 변경시키는 함수
  - Reducer는 외부요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야하기 때문에 순수함수여야한다.
  - 만약 여러개의 Reducer를 사용하는 경우, Redux의 combineReducers메서드를 사용해 하나로 합쳐줄 수 있다.

import { combineReducers } from 'redux';

const rootReducer = combineReducer({
  counterReducer,
  anyReducer,
  ...
});

• Action
  - Action은 말 그대로 어떤 액션을 취할 것인지 정의해놓은 객체로, 다음과 같은 형식으로 구성된다.

	{ type: 'INCREASE' } // payload가 필요없는 경우

	{ type: 'SET_NUMBER' , payload: 5 } // payload가 필요한 경우

- 여기서 type은 필수로 지정해 주어야한다.
-> 해당 Action객체가 어떤 동작을 하는지 명시해주는 역할
-> 대문자와 Snake Case로 작성
-> 필요에 따라 payload를 작성해 구체적인 값 전달.

- 보통 Action을 직접 작성하기보다는 Action객체를 생성하는 함수를 만들어 사용
-> 이러한 함수를 액션생성자(Action Creator)라고도 한다.

• Dispatch
  - Reducer로 Action을 전달해주는 함수
  - Dispatch의 전달인자로 Action객체가 전달됨.

// Action 객체를 직접 장성하는 경우
dispatch({ type: 'INCREASE' });
dispatch({ type: 'SET_NUMBER' , payload: 5 });

// 액션 생성자를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );

- Action 객체를 전달받은 Dispatch함수는 Reducer를 호출.

• Redux hooks
  - React-Redux에서 Redux를 사용할 때 활용할 수 있는 Hooks메서드 제공
  - 크게 useSelector(), useDispatch() 이 두가지를 기억.
  

• useDispatch()

import { useDispatch } from 'react-redux'

const dispatch = useDispatch()
dispatch( increase() )
console.log(counter) // 2

dispatch( setNumber(5) )
console.log(counter) // 5

• useSelector()
  - useSelector()는 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드

// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러옵니다.
import { useSelector } from 'react-redux'
const counter = useSelector(state => state)
console.log(counter) // 1

• Redux의 세 가지 원칙
  1. Single soure of truth
  - 동일한 데이터는 항상 같은 곳에서 가지고 와야 한다는 의미
  즉, Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음과 연결되는 원칙
  
  2. State is read-only
  - 상태는 읽기전용이라는 뜻
  - React에서 상태갱신 함수로만 상태를 변경할 수 있었던 것 처럼, Redux의 상태도 직접 변경할 수 없음을 의미
  - 즉, Action객체가 있어야만 상태를 변경할 수 있음과 연결되는 원칙
  
  3. Change are made with pure functions
  - 변경은 순수함수로만 가능하다는 뜻
  - 상태가 엉뚱한 값으로 변경되는 일이 없도록
  Reducer는 순수함수로 작성되어야함.