[JavaScript] Redux(리덕스)

Redux(리덕스)란?

Redux는 위에서 아래로 흐른다는 Flux 개념을 바탕으로 만들어진 상태 관리 라이브러리이다. 이를 통해 여러 컴포넌트들의 state 관련 로직을 분리하여 관리할 수 있고, state 또한 전역에서 관리할 수 있어 더욱 효율적인 코딩이 가능해진다. 하지만 전역에서 관리할 필요가 없는 state와 같은 부분에 redux를 사용하는 것은 오히려 코드량만 늘어날 뿐 도움이 되지 않을 수 있으므로 남용하는 것은 결코 좋지 않다.

Redux에서 주로 사용 되는 키워드

Store(스토어)

리덕스로 상태를 관리할 때 필요한 state, reducer, dispatch 등 다양한 함수들이 저장되는 저장소라고 볼 수 있다.
여러 개의 스토어를 하나의 애플리케이션에서 사용하는 것이 가능하긴 하지만 되도록이면 하나의 애플리케이션에 하나만 존재하는 것이 좋다.

Action(액션)

{
  type: "ADD_DATA",
  payload: {
    id: 0,
    data: "데이터"
  }
}

상태에 변화가 필요할 때 액션을 발생시키면 된다.
이 액션에는 type이라는 키 값이 반드시 들어가야 하며, 이 값은 나중에 액션이 어떤 액션인지 구분하여 reducer가 실행되도록 한다. 액션에는 type외 에도 다른 값을 넣기도 하는데, 주로 payload라는 단어를 사용하여 저장이나 활용을 위한 데이터를 적어주는 것이 일반적이다.

Action Creator(액션 생성자)

export const addData = (payload) => ({
  type: "ADD_DATA",
  payload,
});

말 그대로 액션을 생성하는 함수이다.
인자를 받아서 액션을 생성하기 때문에 여러 컴포넌트나 다른 데이터로 똑같은 액션을 활용이 가능하다. 보통 액션 생성자를 모아둔 파일을 따로 만들어 필요한 곳에서 import하여 사용한다.

Reducer(리듀서)

const calculator = (state, action) => {
  switch (action.type) {
    case "ADD":
      return state + action.number;
    case "SUBTRACT:
      return state - action.number;
    default:
      return state;
  }
}

리듀서는 현재 state와 action을 인자로 받아 새로운 state를 반환한다.
보통 여러 개의 리듀서를 만들고 이 리듀서들을 합쳐서 Root Reducer를 만들어 사용한다. 주의할 점은 이 리듀서는 순수한 함수여야 한다는 점이다. 다시 말해, 같은 인자로 호출된 리듀서는 항상 같은 결과값을 리턴해야 하고 변동성 있는 내용을 함수 내에 넣음으로써 결과값이 상황에 따라 바뀌면 안된다는 뜻이다.

Dispatch

스토어의 내장 함수 중 하나로, 액션을 인자로 전달해 스토어에서 리듀서 함수가 실행되도록 한다. 만약 리듀서 함수 중 해당 액션을 처리하는 리듀서가 있다면 그에 따라 state가 업데이트 된다.

Subscribe

스토어의 내장 함수 중 하나로, 인자로 특정 함수를 전달해주면 액션이 디스패치 될 때 마다 그 함수를 호출하도록 설정할 수 있다.