Redux

Redux란?

JavaScript App을 위한 예측 가능한 상태 관리 라이브러리이다.

 

장점

• store를 사용하여 간단하게 전역 상태 변경이 가능
• 상태에 대한 버전 관리가 가능(시간 여행 가능) -> Redux DevTool
• 각 모듈은 자기 할 일만 하며 디커플링, 즉 의존성이 낮아짐

 

action

상태 변화를 일어날 때 액션을 발생시킨다. 여기서는 type이 반드시 있어야 한다.

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "블로그 작성하기"
  }
}

 

action creator

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

액션 생성 함수를 만들어주는 이유는 컴포넌트에서 쉽게 액션을 발생시키기 위해서 이다. 다른 파일에서도 사용할 수 있게 export 해준다.

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

 

reducer

state(현재 상태)와 action을 파라미터로 받아 새로운 상태로 업데이트한다.

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default: // 기존 state를 그대로 반환하도록
      return state;
  }
}

redux를 사용할 때 여러 개의 reducer를 만들고 합쳐 root reducer도 만들 수 있다.

 

store

하나의 애플리케이션에서 하나의 스토어를 갖고 있다. 스토어 안에는 state, reducer 등이 있다.

 

dispatch

액션을 발생시키고 action을 파라미터로 전달한다. 

디스패치가 호출하면 스토어는 리듀서 함수에서 해당 액션에 로직을 실행시켜 새로운 상태로 업데이트한다.

 

subscribe

subscribe함수에 특정 함수를 전달해 주면 액션이 dispatch 되었을 때마다 전달해준 함수가 호출된다.

-> 보통 리액트에서는 react-redux에서 제공하는 connect함수 또는 useSelector를 통해 리덕스의 스토어의 상태에 구독한다.

 

 

https://react.vlpt.us/redux/01-keywords.html