Redux 와 RTK(Redux toolkit)

✨ Redux란..?

• redux란 JavaScript 상태관리 라이브러리이다.

 

🌎 Redux의 기본 개념 

1. Single source of truth
   • 애플리케이션의 모든 상태는 하나의 저장소(Store) 안에 하나의 객체 트리 구조로 저장됩니다.
2. State is read-only (state는 읽기 전용이다.) 
   • 상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 action 객체를 전달하는 방법뿐입니다.
   • 리액트에서는 setState 메소드를 이용해야 상태 변경이 가능한데 redux에서도 action이라는 객체를 통해서만 상태를 변경할 수 있다.
3. Change are made with pure functions (변화는 순수 함수로 작성되어야한다.)
   • 변경은 순수함수로만 가능하다.
   • 이전 상태를 변경하는 대신 새로운 상태 객체를 생성해서 반환해야한다.

⌨️ 순수함수란?

순수 함수는 외부의 상태를 변경하지 않으면서 동일한 인자에 대해 항상 똑같은 값을 리턴하는 함수

 

Store 

• Store는 상태가 관리되는 오직 하나의 공간
• Store 안에 필요한 상태들 담는다.
• 상태 정보가 필요할 때 Store에 접근한다.

Action

• Action은 스토어에서 운반할 데이터를 말한다.
• Action은 JavaScript 객체 형식으로 되어있다.

Reducer

• Action을 Store에 바로 전달하는 것이 아니고 Action을 Reducer에 전달해야한다.
• Reducer가 주문을 보고 Store의 상태를 업데이트한다.
• Action을 Reducer에 전달하기 위해서 dispatch 메소드를 사용해야한다.

 

☂️ Redux의 장점

• 상태를 예측 가능하게 한다. (순수함수)
• 유지보수 
• 디버깅에 유리 
• 테스트를 붙이기가 용의하다 (순수함수)

 

 

🔥 하지만 redux의 문제점은...

• redux Store구성이 너무 복잡하다.
• 보일러플레이트 코드를 많이 준비해야한다.( action 타입, action 생성함수, reducer)
• redux에서 유용한 작업을 위해 많은 패키지를 추가해야한다.

 

이런 문제를 해결하기 위해 Redux 공식문서에서도 추천하는 Redux Toolkit을 사용합니다.

 

1. Store

기존 Redux는 Reducer를 생성하고 combineReducers로 여러 Reducer들을 합쳐준 뒤 rootReducer까지 만들어야 했고 createStore로 만들어 줘야 했습니다.

 

하지만 redux toolkit은 configureStore로 reducer들을 담아 만들어 주면 됩니다. 또한 state도 store.getState로 가져올 수 있습니다.

export const store = configureStore({
  reducer: {
    counterReducer,
    todoReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;

 

 

 

2. Action

기존 Redux는 Action과 Action type를 직접 만들어줬어야 하지만

redux toolkit은 createSlice에서 만든 것드로 action을 추출할 수 있어서 직접 만들 필요가 없습니다.

 

 

3. Reducer

기존 Redux는 직접 Reducer를 만들고 switch 문으로 action의 타입에 따라 나눠줘야 했고 기존 state에 변경점을 직접 적용시켜줘야 했습니다. 

하지만 redux toolkit은 createSlice로 각 Action에 따른 Reducer를 작성해주면 됩니다.

const initialState = {
  value: 0,
} as LocationState;

export const counter = createSlice({
  name: "counter",
  initialState,
  reducers: {
    reset: () => initialState,
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
    decrementByAmount: (state, action: PayloadAction<number>) => {
      state.value -= action.payload;
    },
  },
});

export const {
  increment,
  incrementByAmount,
  decrement,
  decrementByAmount,
  reset,
} = counter.actions;
export default counter.reducer;

 

 

4. Dispatch

기존 redux는 Action을 Reducer에 전달하기 위해 함수를 만들고 Action type을 직접 입력해줘야 했습니다.

하지만 redux toolkit은 createSlice에서 Action을 추출하고 전달하면 됩니다.

const dispatch = useAppDispatch();

  const error = () =>
    dispatch(incrementByAmount(payload));

 

 

 

많은 사람들이 쓰고 있는 상태관리 라이브러리이지만 redux 사용을 피하는게 좋을 때가 있습니다.

 

Redux 사용을 피해야할때

 

1. 스케일이 작은 프로젝트를 개발할때

아무리 보일러플레이트 코드가 줄어든 redux toolkit이여도 작은 사이즈의 프로젝트를 개발할 때는 default state management를 사용하는 것이 좋습니다.

2. React Context API 로 충분할때

Context API는 Redux가 하는 일을 똑같이 수행할 수 있으므로 Context API로 충분할 떄 굳이 Redux를 사용하지 않아도 됩니다.

 

 

 

 

참고

Redux(리덕스)란? (상태 관리 라이브러리) - 하나몬

[React Native] Redux-Toolkit이란? (feat. 기존 Redux와 비교)

How to Setup Redux Toolkit in Next.js 13 App Directory - CodevoWeb