Redux(1)

Redux

리덕스 소개

리덕스는 상태관리 라이브러리이다. 리액트에 종속되어 있지 않고, 리덕스를 사용하면 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다.

추가적으로, 리덕스의 미들웨어라는 기능을 통해 비동기 작업, 로깅 등의 확장적인 작업들을 더 쉽게 할 수 있게 해 준다.

개념 정리

Action

상태에 어떠한 변화가 필요하게 될 때 우리는 액션이란 것을 발생시킨다. 이는, 하나의 객체로 표현되는데, 액션 객체는 다음과 같은 형식으로 이뤄져 있다.

{
  type: "TOGGLE_VALUE"
}

액션 객체는 type필드를 필수적으로 가지고 있어야 하고 그 외의 값들은 개발자 마음대로 넣어 줄 수 있다.

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

Action Creator

액션 생성함수는 액션을 만드는 함수이다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.

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

// you can make arrows function
const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

Reducer

리듀서는 변화를 일으키는 함수이다. 리듀서는 두 가지의 파라미터를 받아온다.

function reducer(state, action) {
  // 상태 업데이트 로직
  return alteredState;
}

리듀서는 현재의 상태와 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환한다.

Store

리덕스에서는 한 애플리케이션 당 하나의 스토어를 만들게 된다. 스토어 안에는 현재의 앱 상태와 리듀서가 들어가있고 추가적으로 몇 가지 내장 함수도 들어 있다.

createStore함수를 사용하면 파라미터는 리듀서 함수를 전달해준다.

Dispatch

디스패치는 스토어의 내장 함수 중 하나이다. 디스패치는 액션을 발생 시키는 것이라고 생각하면 된다. dispatch라는 함수에는 dispatch(action)과 같이 액션을 파라미터로 전달한다. 

Subscribe

구독 또한 스토어의 내장함수 중 하나이다. subscribe함수는 함수 형태의 값을 파라미터로 받아온다. subscribe함수에 특정 함수를 전달해주면 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출된다.