[Redux]리덕스 툴킷

리덕스 툴킷이란?

리덕스 툴킷은 효율적인 리덕스 개발을 위한 리덕스 개발에 필요한 모든 기본 기능을 제공하는 도구 모음이다. 또한 Redux 로직을 작성하는 표준 방법으로 고안되었으며 사용하는 것을 권장한다고 나와있다.
리덕스 툴킷 문서

툴킷 적용전 코드

const counterReducer = (state = initialState, action) => {
  if (action.type === "increment") {
    return {
      counter: state.counter + 1,
      showCounter: state.showCounter,
    };
  }

  if (action.type === "increase") {
    return {
      counter: state.counter + action.amount,
      showCounter: state.showCounter,
    };
  }

  if (action.type === "decrement") {
    return {
      counter: state.counter - 1,
      showCounter: state.showCounter,
    };
  }

  if (action.type === "toggle") {
    return {
      showCounter: !state.showCounter,
      counter: state.counter,
    };
  }
  return state;
};

const store = createStore(counterReducer);

리덕스 툴킷 createSlice()

npm install @reduxjs/toolkit 설치
기존에 설치한 redux가 존재한다면 Redux toolkit에 포함되기 때문에 삭제

• name: 리듀서의 이름
• initialState: 초기 state
• reducers: 리듀서에 포함될 액션 처리 함수들
  

리덕스 툴킷 configureStore()

createStore에는 하나의 리듀서만 전달해야 하는데 slice가 여러 개면 .reducer를 이용해 서로 다른 slice에 접근하는 reducer도 여러 개기 때문에 문제가 생긴다. 이럴 때 configureStore를 이용한다.

configureStore는 createStore처럼 store를 만든다. 그렇지만 다른 점은 여러 개의리듀서를 하나의 리듀서로 쉽게 합칠 수 있다.

리듀서가 하나인 경우
const store = configure({reducer: counterSlice.reducer});

리듀서가 여러 개일 경우
const rootReducer = {
counter: counterSlice.reducer,
user: userSlice.reducer,
// ... 추가 리듀서
};

const store = configureStore({
reducer: rootReducer,
});

리덕스 툴킷 action

createSlice는 서로 다른 리듀서에 해당하는 고유 액션 식별자를 자동으로 생성한다. 액션 식별자 값을 얻기 위해서는 counterSlice.actions을 사용한다. counterSlice.actions은 key로 채워진 객체인데 지금 경우에는 createSlice 함수의 리듀서 영역에 있는 메서드 이름과 매칭된다. 따라서 직접 리듀서 메서드에 접근할 필요가 없고 Redux toolkit에 의해 자동으로 생성된 메서드가 존재하고 이 메서드가 호출되면 액션 객체가 생성된다.

따라서 store뿐만 아니라 counterActions도 export

dispatch 내부에 직접 액션 객체를 생성하여 보내지 않고 counterActions.함수()를 호출하여 자동으로 생성된 액션 객체를 전달한다.

payload가 필요한 경우 값을 전달하고 action.payload(payload는 기본 설정된 이름)으로 접근하여 값을전달 받을 수 있다.

리덕스 툴킷 리듀서 병합

아래처럼 하나의 리듀서가 아닌 여러 개 리듀서를 병합했을 경우에는 스토어 데이터의 접근하는 방법이 다르다.

리듀서 병합 전 접근

configureStore reducer에 할당한 객체의 키(식별자)를 이용하여 특정 상태 slice에 접근해야 한다.

리듀서 병합 후 접근

• createSlice 함수는 액션 이름과 리듀서 함수 이름을 매핑하는 방식으로 정의되므로 코드의 의도를 더욱 명확하게 나타낸다.
• createSlice 함수를 사용하여 리듀서를 생성하면 이전 코드처럼 많은 if 문을 사용하지 않기 때문에 코드가 간결하고 읽기 쉬워진다
• createSlice 함수를 사용하면 리듀서 내부에서 자동적으로 불변성을 유지한다. 이는 이전 코드(툴킷 사용전)처럼 직접 객체 프로퍼티 값을 변경하는 대신 새로운 객체를 반환하여 원래 state를 변경하지 않고 복제본을 수정하는 방식을 사용합니다. 불변성을 유지하면 리덕스의 예측 가능성과 디버깅 용이성이 향상된다.