Redux

리덕스는 리액트에서 가장 많이 사용하는 상태관리 라이브러리이다. React에서는 state는 컴포넌트 안에서 관리되어 자식 컴포넌트 간의 데이터를 주고 받을 때는 부모 컴포넌트를 통해서 주고 받는다.
이때, 자식이 많아진다면 상태 관리가 매우 복잡해질 것이다.
상태를 관리하는 상위컴포넌트에서 계속 내려 받아야 하는데 이때 Props drilling 이슈가 발생한다.

Redux 기본 용어

액션(Action)

상태에 어떠한 변화가 필요하면 액션을 발생시킨다. 액션은 객체로 표현되고 type 필드를 필수로 가지고 있어야 한다.

{
   type: 'ADD_TODO',
   data: {
       id: 1,
       text: '운동하기'
   }
}

액션 생성함수(Action Creator)

• 액션 생성함수는 액션을 만드는 함수로 화살표 함수로도 만들 수 있다.
• 컴포넌트에서 더 쉽게 액션을 발생시키기 위해 만들어서 사용하는데, export 키워드를 붙여서 다른 파일에서 불러와 사용한다. (필수적인 사항은 아니다)

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

리듀서(Reducer)

변화를 일으키는 함수로 현재의 상태, 전달받은 액션을 참고해서 새로운 상태를 만들어 반환한다.

const reducer = (state = INITAIL_STATE, action) => {
  switch (action.type) {
    case ADD_TODO: {
      return {
        ...state,
        todos: state.todos.concat({
          id: action.payload.id,
          text: action.payload.text,
          isCompleted: false,
        }),
      };
    }

스토어

한 어플리케이션당 하나의 스토를 만들게 되며, 현재의 상태와 리듀서가 들어가 있다.

디스패치

스토어의 내장함수 중 하나로 액션을 발생 시킨다. 호출을 하면 스토어는 리듀서 함수를 실행시켜 새로운 상태로 만들어 준다.

구독(subscribe)

• 스토어 내장함수 중 하나로, 함수 형태의 값을 파라미터로 받아온다. 액션이 디스패치 될때마다 전달해준 함수가 호출된다.

• 이 함수를 사용할 일은 별로 없다. react-redux 라이브러리에서 제공하는 connet함수 or useSelector hook을 사용해 스토어 상태에 구독한다.

Redux의 3가지 규칙

1. Single source of truth

• 하나의 어플리케이션에선 단 한개의 스토어를 만들어서 사용한다.

2. State is read-only

• 리액트에서는 setState를 사용해서 state를 업데이트 할 수 있다.
• 리덕스는 새로운 상태를 생성해서 업데이트 해주는 방식으로 하게 되면, 개발자 도구를 통해 뒤로도 앞으로도 돌릴 수 있다.(한마디로 시간여행 가능해진다!)

3. Changes are made with pure functions

변화를 일으키는 함수 리듀서는 순수한 함수여야 한다.

• 리듀서 함수는 이전 상태와, 액체 객체를 파라미터로 받는다.
• 이전의 상태는 건들이지 않고, 변화를 일으킨 새로운 상태 객체를 만들어 반환한다.
• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 같은 결과값을 반환해야 한다.

요약 정리

• 스토어에는 현재의 상태와 리듀서가 들어가 있게 된다.
• 컴포넌트에서 변화가 필요하면 dispatch를 사용해 액션을 발생시키면
• 리듀서는 전달받은 액션에 따라서 새로운 상태를 만들어서 반환한다.