리덕스는 무엇?

리덕스?

Redux - A predictable state container for JavaScript apps. | Redux

리덕스는 왜 사용할까?

리덕스는 리액트 생태계에서 가장 많이 사용되는 상태 관리 라이브러리이다. 컴포넌트단에서 관리하는 개별 상태 관련 로직을, 다른 파일로 분리시키고 더욱 효율적으로 관리할 수 있게 만들어준다.

 

리덕스의 특징과 장점

• 미들웨어를 이용해서 액션 객체가 리듀서 함수에서 처리되기 전에, 원하는 작업을 수행하도록 구성할 수 있다.
• connet 함수를 비롯한 유용한 상태 관리 함수가 많다.
• Global State에서 모든 글로벌 상태들을 관리할 수 있다.
• 비동기 작업이 많을 경우 리덕스를 사용하여 편하게 관리할 수 있다.

리덕스 주요 키워드

 

Action(액션)

 

• 상태에 특정한 변화가 필요할 때, 액션을 발생시킨다. 액션은 하나의 객체로 표현된다.

• 액션 객체는 ''type''을 키로 하는 필드를 반드시 필수적으로 가지고 있어야 한다. 그 이외의 값은 개발자가 알아서 넣을 수 있다.

  {
    type: "TOGGLE_VALUE",
    data: {
      id: 0,
      text: "Studying Redux"
    }
  }

 

Action Creator (액션 생성 함수)

 

• 말 그대로 액션 객체를 만들어주는 함수

• 파라미터를 받아서 액션 객체 형태로 반환하는 단순한 함수이다.

• 컴포넌트에서 쉽게 액션을 발생시키기 위해서 사용하는 함수이고, 필수 요소는 아니다. 보통은 다른 파일에 정의하여 export하여 사용하는 편이다.

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

 

Reducer (리듀서 함수)

 

• 변화를 일으키는 함수

• 파라미터로 현재의 상태(state), **액션 객체(action)**를 전달 받고 이것을 바탕으로 새로운 상태를 만들어서 반환한다.

• 부합하는 액션 타입이 없다면 원래 상태를 반환해야 한다.

• 여러개의 리듀서 함수를 합쳐서 루트 리듀서 함수를 만들 수 있다. (root-reducer-function and serve-reducer-function)

 

  const reducer = (state, action) => {
    return updatedState;  // 여기에 상태를 업데이트 하는 로직이 들어간다.
  } 
  const counter = (state, action) => {  // 카운터 기능을 위한 리듀서 함수
    switch (action.type) {
      case "INCREASE":
        return state + 1;
      case "DECREASE":
        return state - 1;
      default:
        return state; // -> 만족하는 케이스가 없으면 기존 state 반환 (필수)
    }
  }

 

Store (스토어)

 

• 하나의 프로젝트(앱) 당 하나의 스토어를 만들게 된다.

• 스토어 안에서는 현재의 앱 상태와 각종 리듀서가 들어있다. 기본 내장 함수도 제공된다.

dispatch( )

 

• 스토어의 기본 내장 함수 중 하나.

• 액션을 발생시키는 함수. dispatch(action) 형태로 사용된다. 

 

subscribe( )

• 스토어의 기본 내장 함수 중 하나.

• 파라미터로 함수 형태의 값을 받는다.

• subscribe 함수에 특정 함수를 전달하면, dispatch를 통해 액션이 발생될 경우에 전달한 함수가 호출된다.

 

리덕스 3가지 규칙 (Redux main 3 rules)

 

- 하나의 앱에는 하나의 스토어가 있다.

• 하나의 애플리케이션에는 하나의 스토어를 운용해야 한다. (중복 생성은 권장 사항이 아니다.)

- 상태는 (state) 읽기 전용이다.

 

• 리액트에서 상태를 관리하는 방식과 동일하게 상태의 불변성을 지켜줘야 한다는 말이다.
• 상태를 직접 변경하지 않고 새로운 상태를 생성하여 업데이트 하는 방식으로 사용해야 한다.

- 리듀서 함수는 순수함수여야 한다.

 

• 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
• 이전 상태는 건들지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 리턴한다.
• 동일한 파라미터로 호출된 리듀서 함수는 항상, 언제나 동일한 결과를 리턴해야 한다.
• 따라서 로직에 따라서 다른 결과가 나올 수 있는 new Date(), random() 등은 리듀서 함수 밖에서 처리해줘야 한다.