[React] Redux 사용하기

키워드 (Keyword)

---

액션 (Action)

상태에 변화가 필요하게 될 때 액션을 발생시킵니다.
하나의 객체로 표현이 됩니다.

{
  type: "TOGGLE_VALUE"
}

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

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "프론트엔드 개발자 되기"
  }
}

 

액션 생성함수 (Action Creator)

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

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

// 화살표 함수도 가능합니다
export const addTodo = data => {
  return {
    type: "ADD_TODO",
    data
  }
}

어떠한 변화를 일어켜야 할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거로울 수 있고, 만드는 과정에서 실수를 할 수도 있습니다. 이러한 일을 방지하기 위해 이름 함수로 만들어서 관리합니다.

 

리듀서 (Reducer)

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

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

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

리듀서에서는 불변성을 꼭 유지해줘야 합니다. 만약 state가 객체이거나 배열이라면 spread연산자나 concat을 활용하여 기존의 객체나 배열을 건들이지 않고 새로운 객체나 배열을 만들어 반환해주어야합니다.

useReducer 에선 일반적으로 default: 부분에 throw new Error('Unhandled Action')과 같이 에러를 발생시키도록 처리하는게 일반적인 반면 리덕스의 리듀서에서는 기존 state를 그대로 반환하도록 작성해야합니다.

리덕스를 사용 할 때에는 여러개의 리듀서를 만들고 이를 합쳐서 루트 리듀서 (Root Reducer)를 만들 수 있습니다. (루트 리듀서 안의 작은 리듀서들은 서브 리듀서라고 부릅니다.)

 

스토어 (Store)

프로젝트에 리덕스를 적용하기 위해 스토어(Store)를 만듭니다. 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있습니다. 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며, 그 외에도 몇 가지 중요한 내장 함수를 지닙니다.

디스패치 (dispatch)

디스패치는 스토어의 내장함수 중 하나입니다. 디스패치는 액션을 발생 시키는 것 이라고 이해하시면 됩니다. dispatch 라는 함수에는        액션을 파라미터로 전달합니다.

dispatch({ type: 'INCREASE' })

이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 줍니다.

구독 (subscribe)

구독도 스토어의 내장 함수 중 하나입니다. subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해 주면, 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출됩니다.
리액트에서 리덕스를 사용하게 될 때 보통 이 함수를 직접 사용하는 일은 별로 없습니다. 그 대신에 react-redux 라는 라이브러리에서 제공하는 connect 함수 또는 useSelector Hook 을 사용하여 리덕스 스토어의 상태에 구독합니다.

 

리덕스의 3가지 규칙

---

1. 하나의 애플리케이션엔 하나의 스토어가 있습니다.

하나의 애플리케이션에선 단 한개의 스토어를 만들어서 사용합니다. 여러개의 스토어를 사용하는것은 사실 가능하기는 하나, 권장되지는 않습니다. 특정 업데이트가 너무 빈번하게 일어나거나, 애플리케이션의 특정 부분을 완전히 분리시키게 될 때 여러개의 스토어를 만들 수도 있습니다. 하지만 그렇게 하면, 개발 도구를 활용하지 못하게 됩니다.

 

2. 상태는 읽기전용 입니다.

불변성을 지켜주어야합니다. 불변성을 지켜주는 것은 좋은 성능을 지켜내기 위함입니다. 불변성을 지켜야만 컴포넌트들이 제대로 리렌더링 됩니다.

 

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

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

동일한 인풋 -> 동일한 아웃풋
new Date(), Math.random(), axios.get() 을 사용할 수 없습니다.
리듀서 밖에 있는 변수을 사용할 수 없습니다.