Redux

Redux를 사용하는 이유

상태값을 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리할 수 있기 때문이다!!

Three principles

1. 하나의 애플리케이션 안에는 단 한개의 스토어를 만들어서 사용한다

• 동일한 데이터는 항상 같은 곳(store)에서 가져온다

2. 상태는 읽기 전용이다

• 액션이라는 객체를 통해서 state 변경 가능

3. 변화를 일으키는 함수 reducer는 순수한 함수여야 한다

Redux의 기본 개념 1: Action

: 상태에 어떤 변화가 필요할 때 발생시킨다

• action 객체는 type 필드를 필수적으로 가지고 있어야 한다

{
  type: "ORDER",
  drink: {
      menu: "Americano",
      size: "Grande",
      iced: false
    }
}

Redux의 기본 개념 2: Action Creator

: action을 만드는 함수, 단순히 파라미터를 받아와서 액션 객체 형태로 바꿔준다

• 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위해 사용하기 때문에 보통 export 키워드를 붙여서 사용함

export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

Redux의 기본 개념 3: Reducer

: 변화를 일으키는 함수, 두가지의 파라미터를 받아온다

• action 객체는 dispatch에게 전달되고, dispatch는 reducer를 호출해서 새로운 state 생성

ex) 카운터를 위한 리듀서

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

Redux의 기본 개념 4: Store

: store 안에는, 현재의 앱 상태와, 리듀서가 들어있고 내장함수들이 몇가지 있다

Redux의 기본 개념 5: Dispatch

: store 내장함수 중 하나이고 액션을 발생시키는 것, dispatch 함수에는 액션을 파라미터로 전달함

Redux의 기본 개념 6: Subscribe

: store 내장함수 중 하나이고 함수 형태의 값을 파라미터로 받아옴

Redux의 기본 개념 Overview

Redux의 장점

• 상태를 예측 가능하게 만들어 준다
• 유지보수
• 디버깅에 유리하다(action과 state log 기록 시)
• 테스트를 붙이기 쉽다