Redux(리덕스)

Redux(리덕스)

리액트에서 가장 많이 사용하는 상태관리 라이브러리.
컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리 할 수 있다.

단순히 전역 상태 관리만 한다면 Context API를 사용해도 되지만 대규모 프로젝트에서는 리덕스가 좋다.
유지 보수성을 높이고 작업 효율도 극대화 해주며, 미들웨어기능을 제공하여 비동기를 훨씬 효율적으로 관리 하게 해준다.

개념 정리

액션

상태에 어떠한 변화가 필요하면 액션(action)이라는 것이 발생.
액션 객체는 type 필드필수. 이 값이 액션의 이름이라 생각 하면 됨.

{
  type: 'ADD_LIST'
  data: {
    id: 1,
    title: 'List 1'
  }
}

액션 생성 함수

액션 객체를 만들어 주는 함수.

function addList(data) {
  return {
    type: 'ADD_LIST',
    data
  };
}
// 화살표 함수로도 가능
cosnt addList = data => ({
  type: 'ADD_LIST',
  data
})

리듀서(reducer)

변화를 일으키는 함수
액션을 생성.발생시키면 리듀서가 현재 상태과 전달받은 액션 객체를 파라미터로 받아온다.
그리고 두 값을 참고하여 새로운 상태를 만들어 반환

const initialState= {
  counter : 1
}
function reducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return {
        counter: state.counter + 1
         };
    default:
      return state;
  }
}

스토어(store)

프로젝트에 리덕스를 적용시키기 위해 만듦.
한개의 프로젝트는 단 하나의 스토어를 가질 수 있다.
스토어 안에 애플리케이션 상태와 리듀서가 들어가 있으며, 그 외 중요한 내장함수를 지닌다.

디스패치(dispatch)

스토어의 내장함수 중 하나. '액션을 발생시키는 것'이라 이해.
dispatch(action)과 같은형태로 액션객체를 파라미터로 넣어서 호출
이 함수가 호출되면 리듀서를 실행시켜 새로운 상태를 만들어 준다.

구독(subscribe)

스토어의 내장함수 중 하나.
subscribe 함수 안에 리스터 함수를 파라미터로 넣어서 호출해주면,
이 리스너 함수가 액션이 디스패치되어 상태가 업데이트 될 때마다 호출된다.

const listener = () => {
  console.log('상태 업데이트');
}
const unsubscribe = store.subscribe(listener);

unsubscribe(); // 구독을 비활성화 할 때 호출

리덕스 3개의 규칙

단일 스토어

하나의 프로젝트에는 단 하나의 스토어만 있어야 한다.
불가능한건 아니지만 여러개 만들면 상태 관리가 복잡해질 수 있다.

읽기전용 상태

리덕스 상태는 읽기 전용
상태를 업데이트할 때 기존의 객체를 건드리지 않고 새로운 객체를 생성해 주어야 한다.
리덕스에서 불변성을 유지해야 하는 이유는 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문.

리듀서는 순수한 함수

리듀서 함수는 순수한 함수여야 하고 다음 조건을 만족해야 한다.

• 리듀서 함수는 이전 상태와 액션객체를 파라미터로 받는다.
• 파라미터 외의 값에는 의존하면 안된다.
• 이전 생태를 절대 건드리지 않고 변화를 준 새로운 상태 객체를 만들어서 반환해야 한다.
• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 값을 반환해야 한다.