[상태관리 라이브러리] Redux

Redux란?

가장 사용률이 높은 상태관리 라이브러리
Javascript application들의 state를 관리하는 방법

• Angular, Vue.js, Vanila Javascript에서도 사용 가능
• 컴포넌트끼리 state를 공유 시 여러 컴포넌트를 거치지 않고 쉽게 state 전달 가능
• 미들웨어라는 기능을 통해 비동기 작업, 로깅 등 확장적인 작업들 쉽게 가능

 

 

Redux의 필요성

• 전역 상태 관리를 위한 라이브러리
• 컴포넌트 간 데이터(state, props)를 좀 더 편하게 전달하고자 사용
• 바깥에서 상태관리가 가능

 

 

Redux의 흐름

 

 

Redux의 개념

액션 (Action)

• 상태 변화가 필요할 때, 액션 발생
• 하나의 객체로 표현
• 액션 객체는 type 필드가 필수
• 추가적으로 필요한 요소는 필수적X

{
  type: "ADD",
  data: {
    id: 0,
    text: "Redux"
  }
}

 

 

액션 생성함수 (Action Creator)

• 액션을 만드는 함수
• 파라미터 입력 받아 액션 객체 형태 생성

//data 파라미터를 입력받아, 액션을 객체 형태로 반환하는 함수

function addTodo(data) {
  return {
    type: "ADD",
    data
  };
}

const addTodo = data => ({ 
  type: "ADD",
  data
});

 

 

리듀서(Reducer)

• 변화를 일으키는 함수
• 현재의 상태, 전달 받은 액션이 파라미터
• 로직에 의해 변화된 상태 값 리턴

function reducer(state, action) {
  ...
  return alteredState;
}

 

 

스토어 (Store)

• 컴포넌트 외부에 있는 상태 저장소
• 스토어 안에 현재 상태, 리듀서, 내장 함수를 포함

 

 

디스패치 (dispatch)

• 스토어의 내장함수
• 액션 발생시키는 역할
• 스토어에게 상태 변화 필요하다는 것을 알림

 

 

Redux의 규칙

하나의 애플리케이션 안에 하나의 스토어

• 하나의 애플리케이션에는 하나의 스토어를 사용하는 것을 권장

상태는 읽기전용

• 기존 상태를 수정하지 않고, 새로운 상태 생성하여 업데이트

리듀서는 순수 함수

• 순수 함수 = 동일한 입력을 받았을 때 언제나 동일한 출력을 내는 함수
• 동일 인풋에 대한 동일 아웃풋 보장