Redux

리덕스란 상태 관리 라이브러리입니다. 리덕스를 사용하면, 컴포넌트 내에 상태들을 글로벌하게 관리할 수도 있고, 파일로 따로 모아서 상태를 관리하면서 더 효율적인 상태관리를 할 수 있습니다. 즉, 모든 컴포넌트들이 쉽게 하나의 상태를 공유할 수 있습니다.

 

개인적으로는 어떠한 상태를 읽는 컴포넌트와 상태에 변화를 주는 컴포넌트가 서로 다른데, 트리 구조상 서로 멀리 있을 때 글로벌하게 상태를 관리할 필요가 있다고 느끼는 편입니다 : )

왜냐하면 두 컴포넌트는 서로 연결되어있지 않기 때문에, 두 컴포넌트를 연결할 수 있는 부모 컴포넌트에서 해당 상태를 가지고 있어야 하고, 이는 앱의 규모가 크고 트리의 구조가 깊다면 엄청난 props drilling을 발생시킬 수도 있기 때문입니다.

 

Dispatch()

디스패치는 스토어의 내장 함수입니다. 디스패치는 액션 생성 함수를 실행시켜, 액션을 스토어에 보내줍니다.

Action Creator()(액션 생성 함수)

액션 생성함수는, 액션을 생성하여 리턴하는 함수입니다.

 

export const increaseCount(data) {
  return {
    type: "INCREASE_COUNT",
    number: data
  }
}

Action

상태에 어떠한 변화가 필요할 때 우리는 액션을 발생시킵니다. 즉, 어떤 동작에 대해 선언된 객체로, 상태를 변화 시킬 때 참조 할 수 있습니다. 액션은 type이라는 필드를 필수로 가지고 있습니다.

 

{
  type: "INCREASE_COUNT"
  data: ... (optional)
}

 

Reducer

유일하게 상태에 변화를 일으킬 수 있는 순수함수입니다. 현재 상태와 액션 객체를 파라미터로 받고, 액션 타입에 따라 상태를 어떻게 변화시킬지에 대한 로직을 정의하고 있습니다. 새롭게 변경된 상태 객체를 리턴합니다.

 

export const reducer = (state = initialState, action) => {
  switch(action.type) {
    case 'INCREASE_COUNT':
      return state + 1;
    case 'DECREASE_COUNT':
      return state - 1;
    default:
      return state;
  }
}

 

Store

스토어 안에는, 현재 상태와 리듀서 그리고 몇 가지 내장 함수(dispatch(), subscribe()...)가 존재합니다. 리덕스는 하나의 어플리케이션 당 하나의 스토어만을 가집니다. 

Subscribe()

스토어의 내장 함수입니다. 컴포넌트들은 스토어를 구독합니다. 구독을 하는 과정에서, 특정 함수가 스토어에 전달 되고 나중에 스토어에 변경사항이 생기면 전달받은 함수를 호출하여 구독하는 컴포넌트에게 변경사항을 알려줍니다.

 

🙋🏻‍♀️ Redux의 3가지 원칙

1. 단 하나의 스토어를 사용합니다.
   • 애플리케이션의 모든 상태는 하나의 스토어 안에 하나의 객체 트리 구조로 저장합니다.
2. state는 read-only입니다.
   • state는 직접 변경할 수 없습니다.
     • 디버깅이 쉬워집니다.
     • 불변성을 유지하므로써, 객체의 레퍼런스만을 비교하는 얕은 비교를 하여 어플리케이션의 더 좋은 성능을 유지할 수 있습니다.
3. 리듀서는 순수 함수여야 합니다.
   • 리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받습니다.
   • 이전의 상태는 절대로 건들이지 않고, 변화한 새로운 상태 객체를 만들어서 반환합니다.
   • 똑같은 파라미터로 호출된 리듀서 함수는 항상 똑같은 결과값을 반환해야 합니다. 즉, 동일한 인풋에 의해서는 동일한 아웃풋이 있어야 합니다. 순수하지 않은 작업은 리듀서 바깥에서 해줘야 합니다.

 

출처

• https://react.vlpt.us/redux/02-rules.html
• https://velog.io/@velopert/Redux-1-소개-및-개념정리-zxjlta8ywt#액션-action
• https://mjn5027.tistory.com/33
• https://velopert.com/3528