Redux

Redux란?

리덕스는 상태 관리 라이브러리입니다. 리덕스를 사용하면 상태 관련 로직들을 다른 파일로 분리시켜 효율적으로 관리 할 수 있고, 컴포넌트끼리 상태를 공유하게 될 때 props를 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있습니다.

Redux의 세 가지 원칙

1. Single source of truth
   (하나의 애플리케이션 안에는 하나의 스토어가 있습니다.)

2. State is read-only
   (상태는 읽기전용 입니다.)

3. Changes are made with pure functions
   (변화를 일으키는 함수, 리듀서는 순수한 함수여야 합니다.)

• 리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받습니다.
• 이전의 상태는 절대로 건들이지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환합니다.
• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야 합니다.

Redux의 기본 개념

Store

const store = createStore(reducer);

Store는 상태가 관리되는 오직 하나의 공간 입니다.

Action

// 액션 타입 정의(액션 타입은 주로 대문자로 작성합니다.)
const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';

//액션 생성함수(여기서 type은 필수로 들어가야합니다.)
const increase = () => ({
  type: INCREASE
});

const decrease = () => ({
  type: DECREASE
});

액션은 애플리케이션에서 "상태 변경을 설명하는 정보"를 스토어로 보내는 JavaScript객체로 Redux에 알려(dispatch)변화를 이끌어냅니다.

Reducer

리듀서란 애플리케이션 상태를 교체하는 함수입니다. 즉 이전상태를 새로운 상태로 교체 합니다.

// 액션 생성함수들을 통해 만들어진 객체들을 참조하여 새로운 상태를 만드는 함수
// 리듀서에서는 불변성을 꼭 지켜줘야합니다.(spread syntax또는 Object.assign사용)
function reducer(state, action) {
  switch (action.type) {
    case INCREASE:
      return {
        ...state,
        counter: state.counter + 1
      };
    case DECREASE:
      return {
        ...state,
        counter: state.counter - 1
      };
    default:
      return state;
  }
}

Redux의 Overview

브라우저에서 '+' 버튼을 클릭하는 이벤트가 발생하면 Dispatch의 전달인자로 Action을 담아서 Reducer로 전달이 됩니다.
그럼 Reducer는 Action객체의 타입에 따라서 다른 동작을 수행합니다.
그 동작의 수행결과로 새로운 State가 반환이 됩니다.

Redux Hooks Method

• useSelector():

// state의 값은 store.getState() 함수를 호출했을 때 나타나는 결과물과 동일합니다.
useSelector(state => ({
    ...obj
  }));

useSelector은 컴포넌트와 state를 연결하는 역할을 합니다. useSelector의 전달인자로는 콜백 함수를 받으며 콜백 함수의 전달인자로는 state값이 들어갑니다.

• useDispatch():

const dispatch = useDispatch();

useDispatch는 Action객체를 Reducer로 전달해주는 메소드입니다.